CSS Form

A form example where we use CSS to style HTML form elements:

CSS Example

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

Input Field Styling

Use the width property to set the width of the input field:

CSS Example

input {
  width: 100%;
}

In the above example, the width of all <input> elements is set to 100%. If you want to set the width for specific types of input fields, you can use the following attribute selectors:

• input[type=text] - Selects text input fields
• input[type=password] - Selects password input fields
• input[type=number] - Selects number input fields
• ...

Input Field Padding

Use the padding property to add padding inside the input field.

CSS Example

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

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, including the border and padding. CSS3 Box Sizing.

Input Field Border

Use the border property to modify the size or color of the input border, and the border-radius property to add rounded corners to the input:

CSS Example

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

If you only want to add a bottom border, use the border-bottom property:

CSS Example

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Input Field Color

Use the background-color property to set the background color of the input field, and the color property to modify the text color:

CSS Example

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Input Field Focus

By default, some browsers display a blue outline when the input field is in focus (clicked). 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 is in focus:

CSS Example

input[type=text]:focus {
  background-color: lightblue;
}

CSS Example

input[type=text]:focus {
  border: 3px solid #555;
}

Input Field Icon

If you want to add an icon inside the input field, use the background-image property and the background-position property for positioning. Note to set the left margin for the icon to give it some space:

CSS Example

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

padding-left: 40px;
}

Animated Search Box

The following example uses the CSS transition property to animate the width of the search input when it gets focus. You can learn more about this in our CSS Animations chapter.

CSS Example

input[type=text] {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

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

Textarea Styling

Note: Use the resize property to prevent textareas from being resizable (usually by dragging the bottom-right corner).

CSS Example

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Select Dropdown Styling

CSS Example

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Button Styling

CSS Example

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

/* Hint: Use width: 100% for full-width buttons */

For more details, refer to our CSS Buttons tutorial.

Responsive Form

A responsive form will rearrange the elements to fit different screen sizes. You can resize the browser window to see the effect:

Advanced: The following example uses CSS3 Media Queries to create a responsive form.

CSS Example

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

It seems there was an issue with the attachment or the Chinese text you intended to provide. Please resend the Chinese text for translation.