You have probably seen many websites on the internet with customized text boxes, select boxes, submit buttons, etc. This tutorial will explain how to achieve the same result using simple CSS codes.
If you have not already read the Introduction to CSS tutorial, I would suggest you do so before continuing.
Alrighty, as you know, CSS uses various selectors to determine how different objects in an HTML document are displayed. To customize our form fields, all we have to do is call upon these selectors and modify the properties we want.
Below is a list of some of the selectors that we can use to modify form fields. Although, in this tutorial we will only need the input, select, and textarea selectors.
Using each of these selectors you can modify things like the background color, font color, font size, etc. For example, if I wanted to make the text of all of my input boxes use the font verdana with a size of 10px and blue text, I could do this:
<style type="text/css">
|
|
That would be fine for changing the font, but what about the background and the border? Simple! All we have to do is add those properties inside the curly braces.
<style type="text/css">
|
|
The above would modify all of my input fields to have a gray background with a darker gray border and it would use the background image located at http://mysite.com/input.gif.
The code above, however, would not modify the appearance of the textareas or select boxes on the page. This is because these input fields are created in HTML using a different tag, the textarea and the select tag.
To modify their appearance aswell, all we have to do is add textarea and select to our selectors. You can list as many selectors as you want to take on the properties within the curly braces, just separate each one with a comma.
<style type="text/css">
|
|
If you went ahead and used the exact code above, you would end up with form fields that look like this:
Of course, you can always modify the code to your liking. You can modify other properties of each field to further customize your webpages, but that's basically it for modifing form fields.
I hope this tutorial has been helpful. If you have any questions, feel free to post them below.
| Discuss Tutorial: Custom Input Fields | 1 Comment |