homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Help on assigning CSS Class

5+ Year Member

Msg#: 3453673 posted 11:27 am on Sep 18, 2007 (gmt 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?



WebmasterWorld Senior Member 10+ Year Member

Msg#: 3453673 posted 5:01 pm on Sep 18, 2007 (gmt 0)

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;
.blue input {
background-color: #0000FF;

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

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



5+ Year Member

Msg#: 3453673 posted 6:49 am on Sep 19, 2007 (gmt 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>
<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?


WebmasterWorld Senior Member 10+ Year Member

Msg#: 3453673 posted 10:44 am on Sep 19, 2007 (gmt 0)

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.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 3453673 posted 8:27 pm on Sep 24, 2007 (gmt 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 :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved