CSS Forms

CSS Forms:

Example 1

<!DOCTYPE html?>

<html>

<head>

<style> input[type=text]

{ width: 100%;

padding: 13px 20px; margin: 9px 0;

box-sizing: border-box;

border: 1px solid #555; outline: none;

}

input[type=text]:focus

{ background-color: lightblue; }

</style>

</head>

<body>

<p>In this example, we use the :focus selector to add a background color to the text field when it gets focused (clicked on):</p>

<form>

<label for=”fname”>First Name</label>

<input type=”text” id=”fname” name=”fname” value=”John”> <label for=”lname”>Last Name</label>

<input type=”text” id=”lname” name=”lname” value=”Doe”> </form>

</body>

</html>

Output

In this example, we use the :focus selector to add a background color to the text field when it gets focused (clicked on):

 

Example

<!DOCTYPE html>

<html>

<head>

<style>

input[type=button],

input[type=submit],

input[type=reset]

{ background-color: #4CAF50;

border: none; color: white;

padding: 16px 32px;

text-decoration: none; margin: 4px 2px;

cursor: pointer; }

</style>

</head>

<body>

<p>Styled input buttons.</p>

<input type=”button” value=”Button”>

<input type=”reset” value=”Reset”>

<input type=”submit” value=”Submit”>

</body>

</html>

Output

Styled input buttons.

 

Leave a Reply

Your email address will not be published. Required fields are marked *