codepens/textarea-with-syntax-highli.../dist/style.css

52 lines
795 B
CSS

main {
display: flex;
}
.plain,
.text {
flex: 1 0 20rem;
position: relative;
}
[data-el="input"] {
border-width: 1px;
color: black;
caret-color: black;
white-space: break-spaces;
word-break: break-word;
resize: vertical;
}
[data-el="input"][data-initialized="true"] {
color: transparent;
resize: none;
overflow: hidden;
}
[data-el="highlight"] {
font-family: inherit;
line-height: inherit;
font-size: inherit;
margin: 0;
padding: 0;
white-space: break-spaces;
word-break: break-word;
}
.plain__highlights {
position: absolute;
top: 0;
left: 0;
width: 90%;
border: 1px solid transparent;
pointer-events: none;
}
.plain__editor, .plain__highlights {
width: 90%;
font-size: 1.1rem;
font-family: monospace;
margin: 0;
padding: 0.7rem 1.4ch;
line-height: 1.313;
}