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.
There's actually a way to do this without javascript.
If you set an <input>
's required
selector to true, you can check if there's text in it with the CSS :valid
tag.
References:
input {
background: red;
}
input:valid {
background: lightgreen;
}
_x000D_
<input type="text" required>
_x000D_
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;
}
This is not possible with css. To implement this you will have to use JavaScript (e.g. $("#input").val() == ""
).
You can take advantage of the placeholder and use:
input:not(:placeholder-shown) {
border: 1px solid red;
}
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
<input type="text" placeholder="filter here" id="mytest" />
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
The valid selector will do the trick.
<input type="text" class="myText" required="required" />
.myText {
//default style of input
}
.myText:valid {
//style when input has text
}
You can use the :placeholder-shown
pseudo class. Technically a placeholder is required, but you can use a space instead.
input:not(:placeholder-shown) {_x000D_
border-color: green;_x000D_
}_x000D_
_x000D_
input:placeholder-shown {_x000D_
border-color: red;_x000D_
}
_x000D_
<input placeholder="Text is required" />_x000D_
<input placeholder=" " value="This one is valid" />_x000D_
<input placeholder=" " />
_x000D_
Using JS and CSS :not pseudoclass
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_
<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />_x000D_
_x000D_
_x000D_
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;
}
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;
}
Basically what everybody is looking for is:
LESS:
input:focus:required{
&:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
&:valid,
&: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;}
Simple css:
input[value]:not([value=""])
This code is going to apply the given css on page load if the input is filled up.
do it on the HTML part like this:
<input type="text" name="Example" placeholder="Example" required/>
The required parameter will require it to have text in the input field in order to be valid.
<input onkeyup="this.setAttribute('value', this.value);" />
and
input[value=""]
will work :-)
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:
<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
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.
Source: Stackoverflow.com