#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0

    Fomatting "<input type=text readonly..." fields using CSS


    Can anyone tell me how to change the colour of an input field on a form when it is readonly so that the user knows that it is readonly. Would like to be able to accomplish this by simply adding some code to the css file so that I don't have to update the existing jsp's.

    Thanks,
    Simon.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    The good news: CSS2.
    Code:
    input[readonly] {background: buttonface;}
    The bad: you got it - not in IE (except IE5+ Mac).

    How stringent is that restriction?
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0
    The project spec is IE5 so I'll give the "input[readonly]" tag a go. I've started to remove all the readonly feilds and replace then with simple text but it will be a greadt help if I can change the colour in the css.

    Is the style sheet defined in exactly the same way, i.e. can I simply slot the "input[readonly]" tag into the existing stylesheet?

    Thanks very much for you help.

    Simon.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Simon....oops.
    ...not in IE
    Sorry.

    Yes to your second question. It's a selector.

    http://www.yourhtmlsource.com/styles...html#attribute
    http://www.xs4all.nl/~ppk/css2tests/intro.html
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    3
    Rep Power
    0
    Thanks for you help. The sites included are very useful. I wonder how long before IE will support?

    Simon.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    input.readonly {background: buttonface;}
    
    </style>
    <script type="text/javascript" language="javascript">
    
    function init_fields()
    {
    	var el, els, e, f = 0, form, forms = document.getElementsByTagName('form');
    	while (form = forms.item(f++))
    	{
    		e = 0; els = form.getElementsByTagName('input');
    		while (el = els.item(e++))
    			if (el.readOnly)
    				el.className = 'readonly';
    	}
    }
    
    onload = init_fields;
    
    </script>
    </head>
    <body>
    <form>
    <input id="readonly" type="text" name="readonly" value="readonly" readonly="read-only">
    <input id="readwrite" type="text" name="readwrite" value="read/write">
    </form>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo