YouTipCss Form
A form example, we use CSS to render HTML form elements:
## CSS Example
input, select{width:100%; padding:12 px 20 px; margin:8 px 0; display:inline-block; border:1 px solid#ccc; border-radius:4 px; box-sizing:border-box; }input{width:100%; background-color:#4CAF50; color:white; padding:14 px 20 px; margin:8 px 0; border:none; border-radius:4 px; cursor:pointer; }input:hover{background-color:#45a049; }div{border-radius:5 px; background-color:#f2f2f2; padding:20 px; }
[Try it Yourself »](#)
* * *
## Input Style
Use the width property to set the width of the input field:
## CSS Example
input{width:100%; }
[Try it Yourself »](#)
In the above example, all elements are set to 100% width. If you only want to set specific types of input fields, you can use the following attribute selectors:
* `input` - Select text input field
* `input` - Select password input field
* `input` - Select number input field
* ...
* * *
## Input Padding
Use the **padding** property to add padding inside the input field.
## CSS Example
input{width:100%; padding:12 px 20 px; margin:8 px 0; box-sizing:border-box; }
[Try it Yourself »](#)
Note that we set the `box-sizing` property to `border-box`. This ensures that the browser renders the input field with the specified width and height by including the border and padding in the calculation.
You can read more at (#).
* * *
## Input Border
Use the `border` property to modify the input border's size or color, and use the `border-radius` property to add rounded corners to the input:
## CSS Example
input{border:2 px solid red; border-radius:4 px; }
[Try it Yourself »](#)
If you only want to add a bottom border, you can use the `border-bottom` property:
## CSS Example
input{border:none; border-bottom:2 px solid red; }
[Try it Yourself »](#)
* * *
## Input Color
You can use the `background-color` property to set the input field's background color, and the `color` property to modify the text color:
## CSS Example
input{background-color:#3CBC8D; color:white; }
[Try it Yourself »](#)
* * *
## Input Focus
By default, some browsers have a blue outline when an input field gets focus (click on the input field). We can set the input style to `outline: none;` to ignore this effect.
Use the `:focus` selector to set the style of the input field when it gets focus:
## CSS Example
input:focus{background-color:lightblue; }
[Try it Yourself »](#)
## CSS Example
input:focus{border:3 px solid#555; }
[Try it Yourself »](#)
* * *
## Input Icon
If you want to add an icon to the input field, you can use the `background-image` property and the `background-position` property for positioning. Note to set the left padding of the icon to give the icon some space:
## CSS Example
input{background-color:white; background-image:url('searchicon.png'); background-position:10 px 10 px; background-repeat:no-repeat; padding-left:40 px; }
[Try it Yourself »](#)
* * *
## Animated Search Box
The following example uses the CSS `transition` property, which sets the input field to expand to the right when it gets focus. You can find more in the (#) chapter.
## CSS Example
input{ -webkit-transition:width 0.4 s ease-in-out; transition:width 0.4 s ease-in-out; }input:focus{width:100%; }
[Try it Yourself »](#)
* * *
## Textarea Style
**Note:** Use the `resize` property to disable the textarea's resizable feature (usually resizable by dragging the bottom right corner).
## CSS Example
textarea{width:100%; height:150 px; padding:12 px 20 px; box-sizing:border-box; border:2 px solid#ccc; border-radius:4 px;