CSS
In this tutorial we will learn to style Forms using CSS.
In the following example we have an input text field.
If we want to apply the style rule to all the input fields then we use the following styling rule.
input { width : 100px; }
We can also apply the rule to specify input type using the attribute selector.
In the following example we are applying the style rule to only input type text.
input[type=text] { width : 100px; }
Similarly, we can use other attribute selectors like the following.
input[type=password]
input[type=number]
input[type=date]
input[type=email]
We change the width of the input text field using the width property.
width
In the following example we have set the width to 100%
input[type=text] { width : 100%; }
We change the padding of the input text field using the padding property.
padding
In the following example we have set the padding to 15px (top-bottom) and 10px (left-right).
input[type=text] { padding : 15px 10px; width : 100%; }
We change the border of the input text field using the border property.
border
In the following example we have set the border to 1px solid #333.
input[type=text] { border : 1px solid #333; padding : 15px 10px; width : 100%; }
We change the border radius of the input text field using the border-radius property.
border-radius
In the following example we have set the border-radius to 10px.
input[type=text] { border-radius : 10px; border : 1px solid #333; padding : 15px 10px; width : 100%; }
We change the text color of the input text field using the color property.
color
In the following example we have set the text color to red.
input[type=text] { color : red; border : 1px solid #333; padding : 15px 10px; width : 100%; }
We change the background color of the input text field using the background-color property.
background-color
In the following example we have set the background color to lightyellow.
input[type=text] { background-color : lightyellow; border : 1px solid #333; padding : 15px 10px; width : 100%; }
We can use the :focus selector to apply some style rules only when the input text is in focus.
:focus
In the following example the style rules will be applied only when the field is in focus.
input[type=text] { border : 1px solid #333; padding : 15px 10px; width : 100%; } input[type=text]:focus { background-color : lightyellow; border : 1px solid yellow; }
By default the browser adds a blue outline to the input field when it is in focus. To remove this default behaviour we set the outline property to none.
outline
none
In the following example when the input field is in focus the blue outline will not appear.
input[type=text] { outline : none; border : 1px solid #333; padding : 15px 10px; width : 100%; }
In the following example when the input field will be in foucs the outline style will be 2px solid red.
input[type=text] { border : 1px solid #333; padding : 15px 10px; width : 100%; } input[type=text]:focus { outline : 2px solid red; }
We use the following commonly used styling property to style the textarea.
font-size
resize
height
In the following example we have styled the textarea having class mytextarea.
textarea.mytextarea { color : #333; background-color : lightyellow; font-size : 16px; border : 1px solid #d1d1d1; resize : none; padding : 15px; width : 80%; height : 200px; } /** * this will be applied when the textarea having class .mytextarea will * be in focus. */ textarea.mytextarea:focus { outline : 2px solid cyan; }
We use the following commonly used styling property to style the select.
In the following example we have applied some style to the select.
select { color : #999; background-color : lightyellow; font-size : 20px; border : 1px solid #333; outline : none; padding : 15px; width : 80%; }
To style form input button we can use the following commonly used style property.
margin
In the following example we have written some style rule for button.
/** * apply this rule to all input type button */ input[type=button] { font-size : 16px; border : none; padding : 15px; margin : 20px 0; width : 100%; display : block; outline : none; } /** * apply this rule if the button has class .btn-success */ input[type=button].btn-success { color : #fff; background-color : #00d200; } /** * apply this rule if the button has class .btn-failure */ input[type=button].btn-failure { color : #fff; background-color : #fa8072; } /** * apply this rule if the button has class .btn-info */ input[type=button].btn-info { color : #fff; background-color : #87cefa; }
To style form buttons like Reset and Submit we can use the following commonly used style property.
In the following example we have written some style rule for submit button.
input[type=submit] { color : white; background-color : green; font-size : 16px; border : none; padding : 15px; margin : 20px 0; width : 100%; outline : none; }
In the following example we have written some style rule for reset button.
input[type=reset] { color : #333; background-color : #d3d3d3; font-size : 16px; border : none; padding : 15px; margin : 20px 0; outline : none; height : 100px; }