Change background color of a form input box

Written by Administrator

Thursday, 29 May 2008

This tutorial will show how to change the color of an input box or textarea when they are active. This is very simple and is done using CSS.

CSS allows for easily changing borders, background color, font-size, color of form inputs and buttons. With the new web standards the background color of the active form input can be changed by using :focus. The example below shows how this works. Unfortunately Focus currently does not work in IE. To any web developer it is no surprise that IE (Internet Explorer) sucks it up again. So for all the IE users SWITCH to Firefox.

css code:

.input { background-color: #656D78; border: 1px solid #333333; color: #cccccc; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

.input:focus { background-color: #3D4D64; border: 1px solid #333333; color: #cccccc; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

.inputbutton{ background-color: #e5ffc3; border: 1px solid #333333; }

.inputbutton:focus{ background-color: #3D4D64; border: 1px solid #333333; }

html code:

<input type="text" name="input1" class="input">
<input type="text" name="input2" class="input">

<select name="sel" class="input" >
<option name="test1">select1</option>
<option name="test2">select2</option>
</select>

<input type="submit" value="submit" class="inputbutton">

Last Updated ( Monday, 02 June 2008 )