Styling form elements in CSS3

How to style html forms elements using CSS

Forms

Forms are used in HTML but forms can be styled by using css.

Form with fullwidth

We can create form with fullwidth by using width property in the form

    <style>
        input {
            width: 100%;
        }
    </style>
</head>
<body>
    <p>A full-width input field:</p>
    <form>
        <label for="Name">Name</label>
        <input type="text" id="Name" name="Name">
    </form>
</body>

In the above code snippet we have the form with width , we have given input as width with 100% which gives the form with width of the page, label is used to specify the name beside the form

output

Form with padding

Padding creates space in the content

<style>
        input[type=text] {
            width: 50%;
            padding: 12px 20px;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
    <p>Padded text fields:</p>
    <form>
        First Name: <input type="text" id="name" name="name">
        <br/>
        Last Name:<input type="text" id="name" name="name">
    </form>
</body>

Padding forms

In the above code snippet we have padding which creates space around the text with 12px and 20px creates space in the form

output

Form with border properties

We can create border properties in the form

 <style>
            input[type=text] {
                width: 50%;
                border:5px solid blue;
                border-top-left-radius:8px;
                border-bottom-right-radius:5px;
                border-top-right-radius:8px;
                border-bottom-left-radius:9px;
            }
        </style>
    </head>
    <body>
        <p>Padded text fields:</p>
        <form>
            First Name: <input type="text" id="name" name="name">
            <br/>
            <br/>
            Last Name:<input type="text" id="name" name="name">
        </form>
    </body>

Form border

In the above code snippet we have border properties in the form

output

Border:none

We can remove border by using border:none property

 <style>
        input[type=text] {
            width: 100%;
            border: none;
            border-bottom: 2px solid green;
        }
    </style>
</head>
<body>
    <p>Text fields with only a bottom border:</p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname">
        <label for="fname">Last Name</label>
        <input type="text" id="lname" name="lname">
    </form>
</body>

Border:none

In the above code snippet we have border:none which removes border in the form

output

Focus in form with background color

We can create focus in the form by using background color, when the mouse is placed on the form it changes the background color of the form

<style>
        input[type=text]:focus {
            width: 100%;
           background-color:pink;
           color:blue;
        }
    </style>
</head>
<body>
    <p>Focus in form element:</p>
    <form>
        
        FirstName:<input type="text" id="fname" name="fname">
        <br/>
        <br/>   
       Lastname: <input type="text" id="lname" name="lname">
    </form>
</body>

Focus

In the above code snippet we have the focus element by using focus , we have the background color to change the color when the mouse is clicked on the form it will changes the color

output

Form with background image

We can create background image in the form by using background property

    input[type=text] {
            width: 100%;
            box-sizing: border-box;
            border: 2px solid black;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
           background-image: url('images.jpg');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
            height:100px;
        }
    </style>
</head>
<body>
    <p>Input with icon:</p>
    <form>
        <input type="text" name="search" placeholder="Type">
    </form>
</body>

Background image

In the above code snippet we have background image in the form by using background property

output

Animated form

we can animate the text box by using form

 <style>
        input[type=text] {
            width: 100px;
            height:100px;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 20px;
            background-color: green;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.1s ease-in-out;
        }
            input[type=text]:focus {
                width: 100%;
                background-color:pink;
            }
    </style>
</head>
<body>

    <p>Animated search input:</p>

    <form>
        <input type="text" name="search" placeholder="Search..">
    </form>

</body>

Animated text box

In the above code snipet we have created the animated text box such that when the mouse is clicked on it it extracts the text box by using the properties webkit transition and focus is used to change the color of the text box

output

Form with select option

We can create select option in form

<style>
        input[type=text],select {
            width: 20%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid green;
            border-radius: 4px;
            box-sizing: border-box;
            
        }
        input[type=submit] {
            width: 20%;
            background-color: green;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: 2px solid red;
            border-radius: 25px;
            cursor: pointer;
        }
            input[type=submit]:hover {
                background-color: #45a049;
            }

        div {
            border-radius: 5px;
            background-color: pink;
            padding: 50px;
        }
    </style>
</head>
<body>
    <p><i>Forms with select option</i></p>
    <div>
        <form action="action_page.php">
            First Name
            <input type="text" id="fname" name="firstname" placeholder="Firstname">
            Lastname
            <input type="text" id="lname" name="lastname" placeholder="lastname">
            State
            <select id="country" name="country">
                <option value="australia">Australia</option>
                <option value="canada">Canada</option>
                <option value="usa">USA</option>
            </select>
            <input type="submit" value="Submit">
        </form>
    </div>
</body>

Select option

In the above code snippet we have created select option in the form we have text box, submit, select option and submit option, we have the input as text, submit and select with different values

output