Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS for INPUT tag (specific types)

    <input type=radio>
    <input type=text>

    <style>Input{background:red}</style>

    for example, I'm working for several html files linking to one CSS file.
    This is my problem, how can i tell CSS to use the background only for Radio buttons, not all kinds of INPUT tags.

    (of course other than specifying a style attribute to each radio tags)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well you could use
    Code:
    input[type="text"] {
    /*css stuff*/
    }
    But this isn't supported by IE, and the styling of radio inputs is very limited. IE is probably the only browser that allows you to style it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't think it's possible unless you give the inputs a class/surround them in their own div etc.

    <div class="iradio">
    <input type="radio" />1
    <input type="radio" />2
    </div>

    .iradio input { /**/ }

    <input type="radio" class="radio_button" />

    .radio_button { /**/ }

  • #4
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanx for your replies...

    input[type="text"] {
    /*css stuff*/
    }

    doesn't work ofr IE and even FF, i use IE for my work.

    and i don't and can't use DIV to enclose my radio buttons too..

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm I think this solution might be something that intersests you.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    input.radio {
    background:#00F;
    color:#FFF;
    }
    input.text {
    background:#F00;
    color:#FFF;
    }
    input.submit {
    background:#000;
    color:#FFF;
    }
    </style>
    <script type="text/javascript">
    function setClass(){
    	var theinputs = document.getElementsByTagName("input");
    	var i;
    	for(i = 0; i < theinputs.length; i++)
    	{
    		if(theinputs[i].type == "radio" || theinputs[i].type == "checkbox")
    		{
    			theinputs[i].className = 'radio';
    		}
    		if(theinputs[i].type == "text" || theinputs[i].type == "password")
    		{
    			theinputs[i].className = 'text';
    		}
    		if(theinputs[i].type == "submit" || theinputs[i].type == "reset")
    		{
    			theinputs[i].className = 'submit';
    		}
    	}
    }
    window.onload = setClass;
    </script>
    </head>
    
    <body>
    <form>
    <input type="radio" />
    <input type="radio" />
    <input type="radio" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="password" />
    <input type="password" />
    <input type="password" /><br />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="submit" />
    <input type="reset" />
    </form>
    </body>
    </html>
    Basically it goes through all of the inputs and checks to see what type it is. If its radio or checkbox give it the .radio class, if its text or password give it the .text class if its a submit or reset give it the .submit class.

    And this
    Code:
    input[type="text"] {
    /*css stuff*/
    }
    does work in FF. See?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    input[type="text"] {
    background:#00F;
    color:#FFF;
    }
    </style>
    </head>
    
    <body>
    <form>
    <input type="text" />
    </form>
    </body>
    </html>
    Last edited by _Aerospace_Eng_; 02-24-2006 at 02:21 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thnx...
    nice option...although i still have to think about it, because i want faster processing of all my scripts, they are quite slow and big

    yah, the FF code works, sorry , i made a mistake, i used <input> instead of <input type=text> i thought it's by default with type=text.

  • #7
    Regular Coder
    Join Date
    Sep 2002
    Location
    Saskatoon SK Canada
    Posts
    174
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks for the script. Did a search instead of asking the same question as somebody else.

    CP
    Colin Puttick

  • #8
    Regular Coder
    Join Date
    Nov 2005
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cool


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •