CODEWITHSUNDEEP
csscss-selectors
Paul Westin III
Paul Westin III

Reputation: 23

Style a text input based on typed data using only CSS

After looking through everything except the Gecko source, I'm somewhat confused by the following behavior. I wanted to see if I could style a text input based on a user-inputted value, and eventually ended up with this CSS:

input[value="password"] {
  border:1px solid red;
}

The problem is, it seems the value of an input is only checked on the elements creation, as seen in this example.

Is it possible to accomplish this without the use of Javascript? Why would a browser not update styles accordingly?

Upvotes: 2

Views: 852

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

It doesn’t work, because attribute selectors “match elements which have certain attributes defined in the source document” (Attribute selectors in CSS 2.1). Things are a bit more complicated really, because calling setAttribute('value','password') on the input element causes a match in many browsers (not IE). But this is irrelevant if you don’t use JavaScript.

There is, however, an indirect way, though it is mostly theoretical for the time being, due to limited browser support and to complications in implementations. You could write:

<style>
input:valid { border: 1px solid red; }
</style>
<input pattern=password id=x>

This uses the HTML5 pattern attribute, in this case specifying a regular expression that is merely a fixed string with no wildcards, and the CSS3 Basic UI :valid pseudo-class that tests whether the element’s state satisfies validity constraints. This is not suitable for normal use (e.g., no support in IE 9), but in special situations in controlled environments, things like this might be usable.

However, browsers that support such features tend to have their own reporting of validity errors, like special color around the box when the value is invalid, and I don’t think you can change that in CSS – JavaScript might help, but… So the reporting might conflict with your goals here. Moreover, it seems that browsers supporting these features treat the element’s state as valid when the box is empty. This is odd, and attempts to work around this my making the input obligatory (HTML5 attribute required) seem to open new cans of worms rather than fix. But maybe in some cases you could use just some initial value, say value="?", that the user is expected to replace by this input.

Upvotes: 2

justisb
justisb

Reputation: 7270

This does not work because you're not actually changing the value attribute of the element. For example, look at this fiddle:

http://jsfiddle.net/jblasco/J9xSd/

It does work, because the value attribute is actually changed. Simply typing in the field, or updating it through the Javascript method you used, does not change it. Which is normally useful, for getting the default value later, but perhaps not-so-useful in this sense.

Upvotes: 1

animuson
animuson

Reputation: 54719

No. CSS cannot check the value of an input field past what is available in the HTML structure.

When you're typing into an input field, you're not actually changing the attribute in the HTML.

Upvotes: 1

Related Questions