css settings form

With the popularity of the Internet and mobile devices, forms have become one of the most commonly used elements in websites and applications. Forms can collect users' basic information, conduct searches, submit content, etc., and have become an extremely important part of interaction design and user experience design. Correct style settings can also greatly improve the usability and aesthetics of the form, thereby increasing user satisfaction and conversion rates. This article will explain how to use CSS to style forms.

1. The basic structure of a form

In HTML, a form usually consists of a form tag and a series of input, select, textarea and other form controls. The following is the simplest form structure:

<form>
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
  <input type="submit" value="提交">
</form>

The label label is used to associate form controls and form description text, the type attribute specifies the control type, and the name attribute is used to name when submitting form data.

2. Commonly used style settings for forms

1. Unify font and font size

Specifying the font and font size of the form control in the style can make the form look Neat and consistent, improving readability and aesthetics. The code example is as follows:

form {
  font-family: Arial, san-serif;
  font-size: 14px;
}

2. Remove the default appearance and borders

Most browsers come with some appearance and borders for form controls, and these default styles do not It may not meet our design requirements. In order to remove these default appearances and borders, you can use the following code:

input[type=text], input[type=password], textarea {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background-color: #f5f5f5;
  padding: 5px;
}

The appearance and -webkit-appearance properties of CSS are used here to set the form appearance to none and remove the borders and outlines. Added background color and padding.

3. Set the width of the text box and password box

By default, the width of the text box and password box is adaptive according to the content. To visually make the form neater, we can set the width to a fixed value, such as 300 pixels. The code example is as follows:

input[type=text], input[type=password], textarea {
  width: 300px;
}

4. Adjust the drop-down box style

The default appearance of the drop-down box may not meet our requirements. You can adjust the style through the following code:

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'><path d='M870.4 358.4l-358.4 358.4-358.4-358.4c-19.2-19.2-51.2-19.2-70.4 0-19.2 19.2-19.2 51.2 0 70.4l384 384c9.6 9.6 22.4 14.4 35.2 14.4s25.6-4.8 35.2-14.4l384-384c19.2-19.2 19.2-51.2 0-70.4-19.2-19.2-51.2-19.2-70.4 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 20px;
  padding-right: 25px;
}

Here, set appearance and -webkit-appearance to none, remove the default appearance, then use CSS to create a background image for the drop-down box arrow, and finally use background-image, background-repeat, background-position and background- The size attribute applies it to the drop-down box.

5. Design submit button style

The submit button is the most important component of the form, and it usually needs to be designed to distinguish it from ordinary buttons. You can use the following code to set the style:

input[type=submit] {
  background-color: #01aef0;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

Here, the background color of the button is set to #01aef0, the foreground color is set to white, the border is removed, the rounded corners and padding are set, and the font size is set to 16 pixels , and finally use the cursor attribute to change the cursor into a hand shape to enhance the interactivity of the button.

3. Summary

In front-end development and web design, the form is undoubtedly a very important element, and the correct style setting can improve the usability and beauty of the form, making it easier for users to Both experience and conversion play a very important role. This article introduces the commonly used form style settings in CSS. Each style is like an independent tool when used alone. However, in actual application, it also needs to be flexibly combined according to the actual situation to form a complete form style that meets the design requirements.

The above is the detailed content of css settings form. For more information, please follow other related articles on the PHP Chinese website!