Question 101456 in Html Question posted in
Some basic documentation can be found here.

Html – Select pseudo element only if input is empty and not focused?

My question is similar to this: Select label only if input is empty and not focused?

But it’s a bit more tricky because I need to select a pseudo-element of the input field if:

  • input field is not focused
  • something is in value

I have no access to the html. I came up with this but no matter what combination I try it’s not selecting how I want it.

<input type="text" id="filter" value="lp">

.container input#filter:not([value=""]):not(input:focus)::before {
  content:'';  
}
Tags:

2

Answers


  1. 0

    The <input> element is a replaced element and as per the note on MDN:

    The pseudo-elements generated by ::before and ::after are contained by the element’s formatting box, and thus don’t apply to replaced elements such as <img>, or to <br> elements.

    This means that no matter what you do, the ::before pseudo-element will never show, even something as benign as:

    input::before {
  content: 'foo';
}

    Will have no visual effect.

    Login or Signup to reply.
  2. 0

    Use this instead

    input#filter:not(:placeholder-shown),
input#filter:not(:focus) {
background-color: red;
}

    and don’t forget to add placeholder to all the inputs you can do this with js

    let temp = document.querySelectorAll("input:not([placeholder]);
temp.forEach((ele)=>{ele.setAttribute("placeholder","text")})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search