How do I change the style of a text box? (HTML / CSS)
How to change the default textbox style. For example, it looks like this:
alt text http://www.wiggle100.com/Untitled-2.png
or
alt text http://www.wiggle100.com/Untitled-3.png
instead:
alt text http://www.wiggle100.com/Untitled-1.png
In theory, you could write a style rule like:
input[type=text] {
border: 4px solid purple;
}
However, the syntax is [type=text]
not cross-browser compatible. I usually add a class to the input text
, for example:
<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 that you want crisp, four-pixel purple borders. Adjust accordingly.
The graphic CSS attribute is what I think you are looking for. See MSDN: http://msdn.microsoft.com/en-us/library/ms533532(VS.85).aspx
The input fields in the screenshot weren't actually decorated, they look like the default for the OS. Instead, the designer decided to create parent elements like form
, fieldset
and possible div
or lists
for positioning.
This article will give you a great foundation for creating more beautiful shapes.