not empty CSS selector is not working

Question

I m having a heck of a time with this particular CSS selector which does not want to work when I add  not  empty  to it  It seems to work fine with any combination of the other selectors   input not  empty  not  focus  invalid   border-color   A22  box-shadow  none     If I remove the  not  empty  part  it works just fine  Even if I change the selector to input not  empty  it still won t select input fields which have text typed into them  Is this broken or am I just not allowed to use  empty within a  not   selector   The only other thing I can think of is that browsers are still saying that the element is empty because it has no children  just a  value  per say  Does the  empty selector not have separate functionality for an input element versus a regular element  This doesn t seem probable though because using  empty on a field and typing something into it will cause the alternate effects to go away  because it is no longer empty    Tested in Firefox 8 and Chrome

User · Answer

It is possible with inline javascript onkeyup  this setAttribute  value   this value     amp  input not  value      not  focus  invalid   Demo  http   jsfiddle net mhsyfvv9    x000D   x000D  input not  value      not  focus  invalid  x000D    background-color  tomato  x000D    x000D   lt input  x000D    type  email   x000D    value     x000D    placeholder  valid mail   x000D    onchange  this setAttribute  value   this value      gt  x000D   x000D   x000D

User · Answer

input not  invalid    border  1px red solid        or   input not  focus  not  invalid    border  1px red solid

User · Answer

x000D   x000D   floating-label-input   x000D    position  relative  x000D    height 60px  x000D    x000D   floating-label-input input   x000D    width  100   x000D    height  100   x000D    position  relative  x000D    background  transparent  x000D    border  0 none  x000D    outline  none  x000D    vertical-align  middle  x000D    font-size  20px  x000D    font-weight  bold  x000D    padding-top  10px  x000D    x000D   floating-label-input label   x000D    position  absolute  x000D    top  calc 50  - 5px   x000D    font-size  22px  x000D    left  0  x000D    color   000  x000D    transition  all 0 3s  x000D    x000D   floating-label-input input focus   label   floating-label-input input focus   label   floating-label-input input valid   label   x000D    top  0  x000D    font-size  15px  x000D    color   33bb55  x000D    x000D   floating-label-input  line   x000D    position  absolute  x000D    height  1px  x000D    width  100   x000D    bottom  0  x000D    background   000  x000D    left  0  x000D    x000D   floating-label-input  line after   x000D    content      x000D    display  block  x000D    width  0  x000D    background   33bb55  x000D    height  1px  x000D    transition  all 0 5s  x000D    x000D   floating-label-input input focus    line after   floating-label-input input focus    line after   floating-label-input input valid    line after   x000D    width  100   x000D    x000D   lt div class  floating-label-input  gt  x000D         lt input type  text  id  id  required  gt  x000D         lt label for  id   gt User ID lt  label gt  x000D         lt span class  line  gt  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You may approach this differently  omit the use of the  empty pseudo-class and utilize input events to detect a significant value in the  lt input gt  field and style it accordingly    x000D   x000D  var inputs   document getElementsByTagName  input    x000D   x000D  for  var i   0  i  lt  inputs length  i      x000D    var input   inputs i   x000D    input addEventListener  input   function     x000D      var bg   this value    green     red   x000D      this style backgroundColor   bg  x000D        x000D    x000D  body   x000D    padding  40px  x000D    x000D   inputList li   x000D    list-style-type  none  x000D    padding-bottom  1 5em  x000D    x000D   inputList li input  x000D   inputList li label   x000D    float  left  x000D    width  10em  x000D    x000D   inputList li input   x000D    color  white  x000D    background-color  red  x000D    x000D   inputList li label   x000D    text-align  right  x000D    padding-right  1em  x000D    x000D   lt ul id  inputList  gt  x000D     lt li gt  x000D       lt label for  username  gt Enter User Name  lt  label gt  x000D       lt input type  text  id  username    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt label for  password  gt Enter Password  lt  label gt  x000D       lt input type  password  id  password    gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Related   Another post on DOM Mutation Events  suggesting the use of input Events  DOM Mutation Events are now deprecated in DOM level 4  and have been replaced by DOM Mutation Observers       Disclaimer  note that input events are currently experimental  and probably not widely supported

User · Answer

Being a void element  an  lt input gt  element is considered empty by the HTML definition of  empty   since the content model of all void elements is always empty  So they will always match the  empty pseudo-class  whether or not they have a value  This is also why their value is represented by an attribute in the start tag  rather than text content within start and end tags   Also  from the Selectors spec      The  empty pseudo-class represents an element that has no children at all  In terms of the document tree  only element nodes and content nodes  such as DOM text nodes  CDATA nodes  and entity references  whose data has a non-zero length must be considered as affecting emptiness    Consequently  input not  empty  will never match anything in a proper HTML document   It would still work in a hypothetical XML document that defines an  lt input gt  element that can accept text or child elements    I don t think you can style empty  lt input gt  fields dynamically using just CSS  i e  rules that apply whenever a field is empty  and don t once text is entered   You can select initially empty fields if they have an empty value attribute  input value      or lack the attribute altogether  input not  value     but that s about it

User · Answer

I was trying to copy Gmail Login  When you click on  quot Email or phone quot  and type something on it the label translatesY -38px  and scales 0 75    What I did -   lt input type  email  class  email  placeholder       gt   Then In my CSS input not  placeholder-shown     put my styles here and I got the expected results    If you try it and find any problem  Please share it

User · Answer

pure css solution  input  -webkit-input-placeholder       opacity  1      -webkit-transition  opacity 0s      transition  opacity 0s      text-align  right       Chrome  lt  56  Safari  lt  10    input -moz-placeholder       opacity  1      -moz-transition  opacity 0s      transition  opacity 0s      text-align  right       FF 4-18    input  -moz-placeholder       opacity  1      -moz-transition  opacity 0s      transition  opacity 0s      text-align  right       FF 19-51    input -ms-input-placeholder       opacity  1      -ms-transition  opacity 0s      transition  opacity 0s      text-align  right       IE 10     input  placeholder       opacity  1      transition  opacity 0s      text-align  right       Modern Browsers       focus  -webkit-input-placeholder      opacity  0     text-align  left       Chrome  lt  56  Safari  lt  10      focus -moz-placeholder       opacity  0      text-align  left       FF 4-18      focus  -moz-placeholder       opacity  0      text-align  left       FF 19-50      focus -ms-input-placeholder       opacity  0      text-align  left       IE 10       focus  placeholder       opacity  0      text-align  left       Modern Browsers     input focus       text-align  left

User · Answer

Another pure CSS solution   x000D   x000D   form  x000D    position relative  x000D    display inline-block  x000D    x000D   form input  x000D    margin-top 10px  x000D    x000D   form label  x000D      position absolute  x000D      left 0  x000D      top 0  x000D      opacity 0  x000D      transition all 1s ease  x000D    x000D  input not  placeholder-shown    label  x000D      top -10px  x000D      opacity 1  x000D    x000D   lt div class  form  gt  x000D       lt input type  text  id  inputFName  placeholder  Firstname  gt  x000D       lt label class  label  for  inputFName  gt Firstname lt  label gt  x000D   lt  div gt  x000D   lt div class  form  gt  x000D       lt input type  text  id  inputLName  placeholder  Lastname  gt  x000D       lt label class  label  for  inputLName  gt Lastname lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

input not  value        This works because we are selecting the input only when there isn t an empty string

User · Answer

You could try using  placeholder-shown     x000D   x000D  input     padding  10px 15px    font-size  16px    border-radius  5px    border  2px solid lightblue    outline  0    font-weight bold    transition  border-color 200ms    font-family  sans-serif      validation     opacity  0    font-size  12px    font-family  sans-serif    color  crimson    transition  opacity     input required valid     border-color  forestgreen     input required invalid not  placeholder-shown      border-color  crimson     input required invalid not  placeholder-shown     validation     opacity  1        x000D   lt input type  email  placeholder  e-mail  required gt   lt div class  validation  gt Not valid lt  span gt  x000D   x000D   x000D   no great support though    caniuse

User · Answer

This should work in modern browsers   input value  not  value        It selects all inputs with value attribute and then select inputs with non empty value among them

User · Answer

Since placeholder disappear on input  you can use   input placeholder-shown        rules for not empty input

[html] :not(:empty) CSS selector is not working?

Examples related to html

Examples related to css

Examples related to css-selectors