CSS Introduction | Advanced CSS | Form Elements

Form elements

With CSS, you can apply various styles to input elements that receive user input.

Setting the size of input elements

You can set the size of input elements by using the width property.

<style>
    input { width: 100%; padding: 10px 20px; margin: 5px 0; box-sizing: border-box; }
</style>

Setting borders on input elements

You can use the border property to change the color and thickness of an input element’s border. You can also use the border-radius property to make the corners of an input element rounded.

<style>
    input[type="text"] { border: solid 2px #D2691E; border-radius: 8px; }
    input[type="password"] { border: none; border-bottom: solid 2px #D2691E; }
</style>

Applying a background color to input elements

You can use the background-color property to set the background color of input elements. You can also use the color property to change the text color of input elements.

<style>
    input { background-color: #FFF8DC; color: olive; }
</style>

Applying styles to focused input elements

You can use the :focus selector to set a separate style for an input element when it has focus.

<style>
    input[type="text"] { border: solid 2px #FFE4B5; -webkit-transition: 0.5s; transition: 0.5s; }
    input[type="text"]:focus { border: solid 2px #D2691E; }
    input[type="password"] { border: solid 1px black; }
    input[type="password"]:focus { background-color: #E0FFFF; }
</style>

Inserting an icon or image into an input element

You can use the background-image property to insert an icon or image into an input element. You can also use the background-position property to set where the inserted icon or image appears.

<style>
    input {
        background-image: url("/examples/images/img_search_icon.png");
        background-position: 5px 4px;
        background-repeat: no-repeat;
    }
</style>

Resizing textarea elements

You can use the resize property to resize textarea elements. When the resize property is set, a handle that can be grabbed with the mouse appears in the lower-right corner of the textarea element. When the user clicks and drags that handle with the mouse, the textarea element can be resized freely.

The resize property values available in CSS are as follows.

<style>
    textarea { width: 100%; height: 200px; box-sizing: border-box; resize: both; }
</style>

The resize property is not supported in Internet Explorer.

Applying styles to select elements

With CSS, you can also apply various styles to select elements.

<style>
    select {
        width: 100%;
        padding: 10px;
        border: solid 1px black;
        border-radius: 5px;
        background-color: #FFFFE0;
    }
</style>