Styling input, should I use a pseudo class or attribute?

[csdude55]

I have this:

<input type="text" name="example" readonly>

I want it to look the same as if it were "disabled" but I want it to post, so the easiest option is to make it "readonly" and style it to look disabled.

I've found this listed as the "correct" method:

input:-moz-read-only {  /* For Firefox */
 color: #808080;
 pointer-events: none
}
input:read-only {
 color: #808080;
 pointer-events: none
}

But this seems to work just fine on both webkit and FF, it's shorter, and it makes more sense to me than a pseudo class:

input[readonly] {
 color: #808080;
 pointer-events: none
}

Is there any specific reason why I should NOT be using the [attribute] format?

[lucy24]

Is there any specific reason

Given that [attribute] [caniuse.com] (in brackets) is supposed to be supported as far back as MSIE 7--which as usual means that all other browsers including Firefox have supported it forever--I certainly can't think of any reason. How old is your source?

The -moz- extension strikes me as an excess of caution, since the same source says that FF has recognized the "readonly" attribute back to version 4 (four).

[csdude55]

Here are the two sources that I originally found:

[w3schools.com...]

[developer.mozilla.org...]

Neither of them have dates that I see, but it looks to still be a current document on Mozilla. I felt like it had to be pretty dated, too, but then I thought... maybe using [attribute] is slower than a pseudo class, and that's why it's recommended?

[tangor]

If it works and does not run foul of validators use what you like, as you like. Pretty sure there are other burning issues to deal with. :)

[jane_eyre]

Hmm, if the value can't be changed, why add it in a input in the first place? Why not just add it in a paragraph and post it on form submit? Or add it in a box that resembles an input form. That way you dont have to worry about accessibility and browser support.

I'd suggest to use the attribute "aria-disabled="true" and then target it with css like this:

CSS [attribute^="value"]

It is more accessible

[csdude55]

In this case, I need the data to post through the form. I could always put it in an <input type="hidden"> and then style a DIV to look like an input tag, but it seems unnecessary when using readonly accomplishes the same thing with a lot less overhead.

[lucy24]

I need the data to post through the form

Isn’t there a command that lets you post “fixed-text-of-some-value” along with the contents of input fields? Or is this one of those situations where doing things in the canonical way is actually more trouble than indulging in a bit of fakery?

[csdude55]

The only way that I can think of would be to change this:

<input type="text" name="whatever" value="Example" readonly>

to:

<input type="hidden" name="whatever" value="Example">
<div style="height: Xpx; width: Ypx; color: #808080; border: 1px solid #808080">Example</div>

That's about 250% more text to do the same thing, and I don't really know of any advantage to it.