How do you change the style of a text box? (HTML / CSS)

Question

How do you change the style of a text box from the default. For instance, so it looks like:

alt text http://www.wiggle100.com/Untitled-2.png

or

alt text http://www.wiggle100.com/Untitled-3.png

instead of:

alt text http://www.wiggle100.com/Untitled-1.png

Answer 1

Theoretically you can write a style rule like:

input[type=text] {
    border: 4px solid purple;
}

However, the [type=text] syntax is not cross-browser compatible. I generally add a text class to the input, like so;

<input type="text" class="text" name="foo" />

Then you can write a traditional CSS rule like:

input.text {
    border: 4px solid purple;
}

Of course, this assumes you want four pixel solid purple borders. Adjust accordingly.