Detect if an input has text in it using CSS -- on a page I am visiting and do not control

Question

Is there a way to detect whether or not an input has text in it via CSS  I ve tried using the  empty pseudo-class  and I ve tried using  value      neither of which worked  I can t seem to find a single solution to this   I imagine this must be possible  considering we have pseudo-classes for  checked  and  indeterminate  both of which are kind of similar thing    Please note  I m doing this for a  Stylish  style  which can t utilize JavaScript   Also note  that Stylish is used  client-side  on pages that the user does not control

User · Answer

The valid selector will do the trick    lt input type  text  class  myText  required  required    gt    myText         default style of input    myText valid         style when input has text

User · Answer

Yes  you can do it with simple basic attribute with value selector      Use attribute selector with blank value and apply properties   input value       input value           background  red

User · Answer

It is possible  with the usual CSS caveats and if the HTML code can be modified  If you add the required attribute to the element  then the element will match  invalid or  valid according to whether the value of the control is empty or not  If the element has no value attribute  or it has value      the value of the control is initially empty and becomes nonempty when any character  even a space  is entered   Example    lt style gt   foo   background  yellow     foo valid   outline  solid blue 2px     foo invalid   outline  solid red 2px     lt  style gt   lt input id foo required gt    The pseudo-classed  valid and  invalid are defined in Working Draft level CSS documents only  but support is rather widespread in browsers  except that in IE  it came with IE 10   If you would like to make    empty    include values that consist of spaces only  you can add the attribute pattern    S     There is  currently  no CSS selector for detecting directly whether an input control has a nonempty value  so we need to do it indirectly  as described above   Generally  CSS selectors refer to markup or  in some cases  to element properties as set with scripting  client-side JavaScript   rather than user actions  For example   empty matches element with empty content in markup  all input elements are unavoidably empty in this sense  The selector  value     tests whether the element has the value attribute in markup and has the empty string as its value  And  checked and  indeterminate are similar things  They are not affected by actual user input

User · Answer

Stylish cannot do this because CSS cannot do this   CSS has no  pseudo  selectors for  lt input gt  value s   See    The W3C selector spec The Mozilla Firefox supported selectors Cross-browser  CSS3 support table   The  empty selector refers only to child nodes  not input values   value     does work  but only for the initial state   This is because a node s value attribute  that CSS sees   is not the same as the node s value property  Changed by the user or DOM javascript  and submitted as form data    Unless you care only about the initial state  you must use a userscript or Greasemonkey script   Fortunately this is not hard   The following script will work in Chrome  or Firefox with Greasemonkey or Scriptish installed  or in any browser that supports userscripts  i e  most browsers  except IE    See a demo of the limits of CSS plus the javascript solution at this jsBin page        UserScript       name      Dynamically style inputs based on whether they are blank      include  http   YOUR SERVER COM YOUR PATH       grant    GM addStyle       UserScript     - The  grant directive is needed to work around a design change     introduced in GM 1 0    It restores the sandbox      var inpsToMonitor   document querySelectorAll        form name  JustCSS   input name   inp       for  var J   inpsToMonitor length - 1   J  gt   0   --J        inpsToMonitor J  addEventListener   change      adjustStyling  false       inpsToMonitor J  addEventListener   keyup       adjustStyling  false       inpsToMonitor J  addEventListener   focus       adjustStyling  false       inpsToMonitor J  addEventListener   blur        adjustStyling  false       inpsToMonitor J  addEventListener   mousedown   adjustStyling  false          -- Initial update  note that IE support is NOT needed      var evt   document createEvent   HTMLEvents        evt initEvent   change   false  true       inpsToMonitor J  dispatchEvent  evt      function adjustStyling  zEvent        var inpVal    zEvent target value      if  inpVal   amp  amp   inpVal replace     s   s   g                zEvent target style background    lime       else         zEvent target style background    inherit

User · Answer

Basically what everybody is looking for is   LESS   input focus required       amp  invalid  color  red  border-color  red  box-shadow  0 0 6px red        amp  valid       amp  placeholder-shown  border-color  green  box-shadow  0 0 8px green       Pure CSS   input focus required invalid  color  red  border-color  red  box-shadow  0 0 6px red   input focus required valid  input focus required placeholder-shown  border-color  green  box-shadow  0 0 8px green

User · Answer

You can style input type text  differently depending on whether or not the input has text by styling the placeholder  This is not an official standard at this point but has wide browser support  though with different prefixes   input type text        color  red    input type text  -moz-placeholder       color  green    input type text   -moz-placeholder       color  green    input type text  -ms-input-placeholder       color  green    input type text   -webkit-input-placeholder       color  green      Example  http   fiddlesalad com scss input-placeholder-css

User · Answer

lt input onkeyup  this setAttribute  value   this value      gt    and   input value       will work  -   edit  http   jsfiddle net XwZR2

User · Answer

There s actually a way to do this without javascript  If you set an  lt input gt  s required selector to true  you can check if there s text in it with the CSS  valid tag  References  MDN Docs CSS Tricks  x000D   x000D  input     background  red     input valid     background  lightgreen    x000D   lt input type  text  required gt  x000D   x000D   x000D

User · Answer

Using JS and CSS  not pseudoclass   x000D   x000D   input   x000D          font-size  13px  x000D          padding  5px  x000D          width  100px  x000D        x000D   x000D      input value       x000D          border  2px solid  fa0000  x000D        x000D   x000D      input not  value        x000D          border  2px solid  fafa00  x000D        x000D   lt input type  text  onkeyup  this setAttribute  value   this value    value      gt  x000D   x000D      x000D   x000D   x000D

User · Answer

do it on the HTML part like this    lt input type  text  name  Example  placeholder  Example  required  gt    The required parameter will require it to have text in the input field in order to be valid

User · Answer

You can use the  placeholder-shown pseudo class  Technically a placeholder is required  but you can use a space instead    x000D   x000D  input not  placeholder-shown    x000D    border-color  green  x000D    x000D   x000D  input placeholder-shown   x000D    border-color  red  x000D    x000D   lt input placeholder  Text is required    gt  x000D   lt input placeholder     value  This one is valid    gt  x000D   lt input placeholder       gt  x000D   x000D   x000D

User · Answer

You can use the placeholder trick as written above w o required field   The problem with required is that when you wrote something  then deleted it - the input will now always be red as part of the HTML5 spec - then you ll need a CSS as written above to fix override it   You can simple do thing w o required   lt input type  text  placeholder  filter here  id  mytest    gt    CSS   mytest placeholder-shown      if placeholder is shown - meaning - no value in input      border  black 1px solid    color  black     mytest        placeholder isn t shown - we have a value in input      border  red 1px solid    color  red      Code pen https   codepen io arlevi pen LBgXjZ

User · Answer

This is not possible with css  To implement this you will have to use JavaScript  e g      input   val

User · Answer

Simple css  input value  not  value  quot  quot     This code is going to apply the given css on page load if the input is filled up

User · Answer

Simple Trick with jQuery and CSS Like so   JQuery      input value       addClass  empty               input   keyup function                if    this  val                             this  addClass  empty                 else                    this  removeClass  empty                                CSS   input empty valid          box-shadow  none          background-image  none          border  1px solid  000             input invalid      input required           box-shadow  3px 1px 5px rgba 200  0  0  0 85           border  1px solid rgb 200 0 0                 input valid          box-shadow  none          border  1px solid  0f0

User · Answer

You can take advantage of the placeholder and use   input not  placeholder-shown      border  1px solid red

[css] Detect if an input has text in it using CSS -- on a page I am visiting and do not control?

Examples related to css

Examples related to input

Examples related to is-empty

Examples related to stylish