homepage Welcome to WebmasterWorld Guest from 54.205.188.59
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Help on assigning CSS Class
psrathore




msg:3453675
 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?

 

Marshall




msg:3454014
 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;
}
-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




msg:3454607
 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>
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




msg:3454735
 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.

Marshall

Robin_reala




msg:3459532
 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