The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.
Being a void element, an <input>
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 <input>
element that can accept text or child elements.)
I don't think you can style empty <input>
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.
It is possible with inline javascript onkeyup="this.setAttribute('value', this.value);"
& input:not([value=""]):not(:focus):invalid
Demo: http://jsfiddle.net/mhsyfvv9/
input:not([value=""]):not(:focus):invalid{
background-color: tomato;
}
<input
type="email"
value=""
placeholder="valid mail"
onchange="this.setAttribute('value', this.value);" />
You could try using :placeholder-shown...
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;
}
<input type="email" placeholder="e-mail" required>
<div class="validation">Not valid</span>
no great support though... caniuse
.floating-label-input {
position: relative;
height:60px;
}
.floating-label-input input {
width: 100%;
height: 100%;
position: relative;
background: transparent;
border: 0 none;
outline: none;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
padding-top: 10px;
}
.floating-label-input label {
position: absolute;
top: calc(50% - 5px);
font-size: 22px;
left: 0;
color: #000;
transition: all 0.3s;
}
.floating-label-input input:focus ~ label, .floating-label-input input:focus ~ label, .floating-label-input input:valid ~ label {
top: 0;
font-size: 15px;
color: #33bb55;
}
.floating-label-input .line {
position: absolute;
height: 1px;
width: 100%;
bottom: 0;
background: #000;
left: 0;
}
.floating-label-input .line:after {
content: "";
display: block;
width: 0;
background: #33bb55;
height: 1px;
transition: all 0.5s;
}
.floating-label-input input:focus ~ .line:after, .floating-label-input input:focus ~ .line:after, .floating-label-input input:valid ~ .line:after {
width: 100%;
}
<div class="floating-label-input">
<input type="text" id="id" required/>
<label for="id" >User ID</label>
<span class="line"></span>
</div>
You may approach this differently; omit the use of the :empty
pseudo-class and utilize input
events to detect a significant value in the <input>
field and style it accordingly:
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('input', function() {
var bg = this.value ? 'green' : 'red';
this.style.backgroundColor = bg;
});
}
body {
padding: 40px;
}
#inputList li {
list-style-type: none;
padding-bottom: 1.5em;
}
#inputList li input,
#inputList li label {
float: left;
width: 10em;
}
#inputList li input {
color: white;
background-color: red;
}
#inputList li label {
text-align: right;
padding-right: 1em;
}
<ul id="inputList">
<li>
<label for="username">Enter User Name:</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Enter Password:</label>
<input type="password" id="password" />
</li>
</ul>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With