Welcome to WebmasterWorld Guest from 18.207.132.114

Forum Moderators: not2easy

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

     
6:22 am on Mar 8, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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?
9:04 pm on Mar 8, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15944
votes: 890


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).
9:16 pm on Mar 8, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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?
1:21 am on Mar 9, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10606
votes: 1128


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. :)
4:30 pm on Apr 6, 2019 (gmt 0)

New User from US 

joined:Apr 6, 2019
posts:9
votes: 0


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
7:07 pm on Apr 6, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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.
9:02 pm on Apr 6, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15944
votes: 890


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?
10:55 pm on Apr 6, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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.