Position :before pseudoclass in-between parent and child CSS -
(basically i'm trying style text field beyond normal capabilities, including filler text doesn't interact directly cursor.)
i wonder if it's possible position (using z-index
if possible) :before
element behind child elements of container element, in front of container background. (maybe you'd understand in bit)
html:
<div class="field" data-title="john"> <input type="text" name="firstname"> </div>
css:
.field{ background-color:white; border:1px solid gray; } .field:before{ content:attr(data-title); } input[type="text"]{ background-color:transparent; border:none; outline:none; }
this displays correctly:
however, i'm concerned because cannot focus text field if cursor on :before
content (in case, word "john").
i understand :before
can styled pointer-events:none
, however, "pointer-events" tag not yet entirely cross-browser compatible.
hopefully made myself clear. @ appreciated. thank time.
Comments
Post a Comment