CSS for <select> & <input type=text>

liunx · Jan 9, 2008

hi, 
 
I have this for taxt area: 
 
TEXTAREA 
{background-color: #F7F7F7; 
border: #7F9DB9 1px solid; 
color: black; 
font-family: Verdana, Tahoma, Arial; 
font-size: 8pt; 
font-weight: normal} 
 
How can I apply it to input type text and select form items?My CSS 
 
 
.formfield { 
border: 1px dotted #000; 
color: #000; 
background-color: #ccf; 
width: 100px; 
font-family: 'Trebuchet MT', 'lucida sans unicode', helvetica, verdana, arial, sans-serif; 
font-size: 8pt; 
 
} 
 
.formbutton { 
border: 1px solid #000; 
color: #000; 
background-color: #69c; 
font-family: 'Trebuchet MT', 'lucida sans unicode', helvetica, verdana, arial, sans-serif; 
font-size: 8pt; 
} 
 
 
Input field 
 
<input type="text" name="name" size="20" class="formfield" onFocus="this.style.background='#eee'" onBlur="this.style.background='#ccf'"> 
 
 
Textarea 
 
<textarea type="text" name="name" rows="5" cols="30" class="formfield" onFocus="this.style.background='#eee'" onBlur="this.style.background='#ccf'"></textarea> 
 
 
Select 
 
<select name="name" class="formfield" onFocus="this.style.background='#eee'" onBlur="this.style.background='#ccf'"> 
 
 
Button 
 
<input type="submit" value="Go" name="submit" class="formbutton" onMouseOver="this.style.background='#ccf'" onMouseOut="this.style.background='#69c'"> 
 
 
HTHThats a great effect thank you. I'm building a commercial e-commerce application. Should I worry about compatibility with Netscape 4 as CSS is impossible with it!NS4's marketshare is continually dwindling. 
 
Unless a significant amount of your visitors use NS4, I wouldn't worry about it.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 
<html> 
<head> 
<title>Untitled</title> 
<style> 
TEXTAREA, input, select 
{background-color: #F7F7F7; 
border: #7F9DB9 1px solid; 
color: black; 
font-family: Verdana, Tahoma, Arial; 
font-size: 8pt; 
font-weight: normal} 
</style> 
</head> 
 
<body> 
<form> 
<input> 
<textarea></textarea> 
<select> 
<option>           </option> 
</select> 
</form> 
</body> 
</html> 
 
 
 
 
(this would apply to all textareas, inputs, and selects. For specific cases, use classes.)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 
<html> 
<head> 
<title>Untitled</title> 
<style> 
.red 
{background-color: red; 
border: #7F9DB9 1px solid; 
color: black; 
font-family: Verdana, Tahoma, Arial; 
font-size: 8pt; 
font-weight: normal} 
 
.blue 
{background-color: blue; 
border: #7F9DB9 1px solid; 
color: black; 
font-family: Verdana, Tahoma, Arial; 
font-size: 8pt; 
font-weight: normal} 
 
.yellow 
{background-color: yellow; 
border: #7F9DB9 1px solid; 
color: black; 
font-family: Verdana, Tahoma, Arial; 
font-size: 8pt; 
font-weight: normal} 
</style> 
</head> 
 
<body> 
<form> 
<input class="red"> 
<textarea class="blue"></textarea> 
<select class="yellow"> 
<option>           </option> 
</select> 
</form> 
</body> 
</html> 
 
 
 
 
and here is an example using classes.I'm back again

How can I make: 
 
<input type="text" name="name" size="20" class="formfield" onFocus="this.style.background='#eee'" onBlur="this.style.background='#ccf'"> 
 
 
Work by pulling info from the style sheet. 
 
e.g. <input type="text" name="name" size="20" class="formfield" onFocus="class.onFocus" onBlur="class.onBlur">class.onFocus 
 
that is invalid. what is it you are trying to do?Scoutt...Brooky wants to get this effect: 
Originally posted by brooky 
<input type="text" name="name" size="20" class="formfield" onFocus="this.style.background='#eee'" onBlur="this.style.background='#ccf'"> 
 
(the background color change) Using info from the CSS file. Try this: 
<input type="text" name="name" size="20" class="formfield" onFocus="this.className='onFocusClassName'" onBlur="this.className='onBlurClassName'"> 
I don't really recommend using "onFocusClassName" and "onBlurClassName" but just replace those with the approprite classes from your CSS. (You'll have to make 2 classes...like formfieldF and formfieldB and that code will swap them.)Works a treat thanks

CSS for <select> & <input type=text>

liunx

Guest