Forum Moderators: not2easy
I always specify a class for my text items and style that class.
<html>
<head>
<style>
.textbox {
color: red;
font-weight:bold;
text-align: center;
}
</style><script language="javascript">
<!--function textBoxStyle() {
var inputs = document.getElementsByTagName('INPUT');
for (var i=0;i<inputs.length;i++) {
if (inputs[i].type.toLowerCase() == 'text') {
inputs[i].className += ' textbox';
}
}
}//-->
</script></head>
<body onload="textBoxStyle()">
<input type="checkbox" />
<input type="button" value="hello" />
<input type="text" value="hello">
</body>
</html>
Remember an id must be unique to the html element, meaning only one unique ID name per page. You can then pick it out with css.
Also if your using a text box then don't forget the label tag. Helps for accessablilty.
This is just an example of different ways to make a text box pretty using either an inline style, a class, an ID or an attribute.
note -> I've added an ID to each just to pass W3c html validation.
##################################
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Silliness</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/*Puts each textfield on its own line*/
label {display:block;margin:3px 0;}
#fieldeg {width:340px;}
/*Use a class for one or more html objects */
.textclass {float:right;border:1px solid #ff0000; background-color:#ccc;color:#0000ff;}
/*Use an ID on only one html object */
#textid {float:right;border:1px solid #00ff00; background-color:#000;color:#fff;}
/*Use an attribute selector IE7 FF2 O9 - will apply to all html objects with value="Good eh?" */
[value="Good eh?"] {float:right;border:2px dashed #0000ff; background-color:#ff0000;color:#000;}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<fieldset id="fieldeg"><legend>Text box CSS examples</legend>
<input type="text" id="firstname" style="float:right;border:1px solid #000; background-color:#f1f1f1;color:#0000ff;" value="Some value"/>
<label for="firstname">Using a style attribute</label>
<input type="text" class="textclass" id="lastname" value="Some value"/>
<label for="lastname">Using a class style </label>
<input type="text" id="textid" value="Some value"/>
<label for="textid">Using an ID style </label>
<input type="text" id="textatt" value="Good eh?" />
<label for="textatt">Using an atribute selector </label>
</fieldset>
</form>
</body>
</html>
Edit
Re-reads original post "apply css for TextBoxes only". Ahh yeah ... assign a class. DOH. Anyhoo bah!
If all browsers supported attribute selectors, we could easily do the following:input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; }
input[type='radio'] { margin:0 20px; }
input[type='checkbox'] { border:2px solid red; }
Since not all browsers support attribute selectors (IE doesn't), we can simply use className's instead, and use JavaScript to automate the process.
function appendInputTypeClasses() {
if (!document.getElementsByTagName )
return;
var inputs = document.getElementsByTagName('input');
var inputLen = inputs.length;
for ( i=0;i<inputLen;i++ ) {
if ( inputs[i].getAttribute('type') )
inputs[i].className += ' '+inputs[i].getAttribute('type');
}
}
Finally, make sure your CSS for this handles both the type attribute and the type class. That way, when browser support for attribute selectors becomes more widespread, you can just remove the JavaScript for appending the classNames.
input[type='text'],input.text { font:bold 0.8em 'courier new',courier,monospace; }
input[type='radio'],input.radio { margin:0 20px; }
input[type='checkbox'],input.checkbox { border:2px solid red; }
Since not all browsers support attribute selectors (IE doesn't),
It does. IE7.
It is a nice solution since it limits the amount of markup you have to include in your raw HTML. It makes it easier to change.
