Help on assigning CSS Class

[psrathore]

I have a scenario where-in the textboxes that are readonly must be populated as blue. I wonder if there is a way of making the color blue without attaching a class to the text box?

[Marshall]

psrathore, welcome to WebmasterWorld.

Short of a script that basically reads:
if input-type="readonly", background-color="#0000FF"

(don't criticize the lack of formal scripting :) )

You will need a class for the input or, if the boxes are in either a <div> or <td>, have a CSS that reads

input.blue {
background-color: #0000FF;
}
-or-
.blue input {
background-color: #0000FF;
}

Then your HTML would be:
<input type="" class="blue" />
or
<div class="blue"><input type=""></div>
or
<td class=blue"><input type=""></td>

Since you should not use an ID more than once per page, you are stuck using a class.

Marshall

[psrathore]

Thanks Marshall for your input but I have a slightly different scenario

All over my application i have

<table><tr><td><input type="text" readonly>
or
<table><tr><td><input type="text" readonly="true">

The above is to just give an idea, i realise it is not complete.

Now instead of going all over the application and changing the class for each text box, is it possible to declare a css class which will change the background color of each of the textboxes which have "readonly" property?

[Marshall]

As I said before, short of a script, I have no idea how you would do that as class, or ID's, involve an "element" (<div>, <p>, <ul>, <li>, <img>, <input> , and so on) and 'readonly' is not an element.

If the readonly has text in it already, hence an assigned value, another script possibility would be (and don't laugh)

function changeBG {
if input.value!="";
then style.background-color=#0000FF;
}

I am sure this is not semantically correct, but you get the idea.

Marshall

[Robin_reala]

Hi psrathore, sorry I'm a bit late with this but I thought I'd jump in anyway.

There's no easy way to do this at the moment while keeping full browser compatibility, but there's an easy method if you're willing to sacrifice IE6 and lower. In that case we can just use the attribute selector:

input[readonly] { background: blue; }

The [] notation selects elements based on attributes; I think that's reasonably self-explanatory.

In the future we will be able to use CSS3 Basic UI's :read-only pseudoclass [w3.org]:

input:read-only { background: blue; }

This actually doesn't have any advantages for use over the attribute selector, but it's language agnostic and a better 'general' solution. No browser support yet though :)