CSS for INPUT tag (specific types)

ken_shoti · 02-24-2006, 12:32 PM

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

_Aerospace_Eng_ · 02-24-2006, 12:39 PM

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.

mark87 · 02-24-2006, 12:40 PM

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 { /**/ }

ken_shoti · 02-24-2006, 01:02 PM

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..

_Aerospace_Eng_ · 02-24-2006, 01:09 PM

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>

ken_shoti · 02-24-2006, 02:16 PM

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.

dreamingdigital · 03-16-2006, 08:06 PM

Thanks for the script.

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

CP

ken_shoti · 04-19-2006, 04:41 AM

Cool