CSS Form - CSS - dyclassroom | Have fun learning :-)

In this tutorial we will learn to style Forms using CSS.

Input Field

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]

Styling width - input text

We change the width of the input text field using the width property.

In the following example we have set the width to 100%

input[type=text] {
	width : 100%;
}

Styling padding - input text

We change the padding of the input text field using the padding property.

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%;
}

Styling border - input text

We change the border of the input text field using the border property.

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%;
}

Styling border radius - input text

We change the border radius of the input text field using the border-radius property.

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%;
}

Styling text color - input text

We change the text color of the input text field using the color property.

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%;
}

Styling background-color - input text

We change the background color of the input text field using the background-color property.

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%;
}

Styling when focus - input text

We can use the :focus selector to apply some style rules only when the input text is in 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;
}

Styling outline - input text

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.

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;
}

Styling textarea

We use the following commonly used styling property to style the textarea.

color to change the color of the text
background-color to change the background color
font-size to change font size
border to change the border
border-radius to change the border radius
outline to change the outline of the textarea when it is in focus
resize to prevent the textarea from being resized
padding to set the padding
width to change the width of the textarea
height to change the height of the textarea

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;
}

Styling select menu

We use the following commonly used styling property to style the select.

color to change the color of the text
background-color to change the background color
font-size to change font size
border to change the border
outline to change the outline of the select when it is in focus
padding to set the padding
width to change the width of 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%;
}

Styling input button

To style form input button we can use the following commonly used style property.

color to change the color of the text
background-color to change the background color
font-size to change font size
border to change the border
padding to set the padding
margin to set the margin
width to change the width of the button
height to change the height of the button
outline to change the outline when button is in focus

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;
}

Styling Reset and Submit button

To style form buttons like Reset and Submit we can use the following commonly used style property.

color to change the color of the text
background-color to change the background color
font-size to change font size
border to change the border
padding to set the padding
margin to set the margin
width to change the width of the button
height to change the height of the button
outline to change the outline when button is in focus

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;
}