The highlighting is occurring on a background layer that is updated on a keyup event listener (the textarea
is transparent (background-color: rgba(0, 0, 0, 0)
)). This is what it looks like if you add some padding-top
to the textarea (the highlight doesn't have an opportunity to update):
Facebook's approach is actually really clever, as you type in the text area the contents are evaluated and sent to a background element that looks like this:
<span class="highlighterContent"><b>#html</b> This is </span>
The <b>
element has the following css:
.uiMentionsInput .highlighter b {
background: linear-gradient(#DCE6F8, #BDCFF1) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 2px;
box-shadow: 0 0 0 1px #A3BCEA;
font-weight: normal;
}
The smart thing is the span behind the text area has a transparent font so it takes the same space as the opaque font of the text area (allowing the <b>
highlight to stay aligned with the textarea text). Smart guys over there :)