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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -