Formatting Forms

You can easily format HTML form text boxes or input boxes with CSS and make them look stylish, contemporary and appealing. Formatting HTML form text boxes or input boxes may involve changing the font type, changing font size, making it bold and italicised, changing the background color of the text box and even changing the shape of the text box (creating rounded corners instead of the conventional 90° corners).

As always is the case you can define its CSS properties either in-line or in a separate stylesheet file, which is the preferred method. To begin with, this is how you can change the font used inside the HTML form text box using CSS:

No matter what font type and font size you are using on your website or blog when it comes to the HTML form input boxes the fonts will be used according to the above definition. As in any other HTML element you can use the above defined CSS class in the following manner:

“box” is the CSS class here that is going to decide how your HTML form input box is going to look. You can further change its looks by incorporating the following CSS definitions: