Welcome to WebmasterWorld Guest from 54.146.201.80

Forum Moderators: not2easy

Message Too Old, No Replies

Help on assigning CSS Class

     
11:27 am on Sep 18, 2007 (gmt 0)

New User

5+ Year Member

joined:Sept 18, 2007
posts: 2
votes: 0


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?
5:01 pm on Sept 18, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2143
votes: 7


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

6:49 am on Sept 19, 2007 (gmt 0)

New User

5+ Year Member

joined:Sept 18, 2007
posts: 2
votes: 0


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?

10:44 am on Sept 19, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2143
votes: 7


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

8:27 pm on Sept 24, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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 :)