How to style an input element using CSS

CSS is a language used to style web pages. It can help us achieve various effects on web pages. In web development, forms are very common elements, and input is one of the most basic controls in the form. In this article, we'll cover how to style input elements using CSS.

1. Input box style

1. Width and height

Through CSS, we can easily set the width and height of the input box. You can use the width and height attributes to set the size of the input box, as follows:

input[type="text"] {
width: 200px;
height: 30px;
}

2. Border style

The border is one of the most commonly used elements in the input box style. The border property can be used to set the border style of the input box.

For example, the following code sets the border of the input box to a solid line, a width of 1 pixel, and a gray color:

input[type="text"] {
border : 1px solid #aaa;
}

We can also set the border to invisible, so that the input box will not have any borders:

input[type="text" ] {
border: none;
}

3. Rounded corners and shadow

Through CSS, we can also set the rounded corners and shadow of the input box. For example, the following code will set the input box's rounded corners to 5 pixels, and the shadow effect:

input[type="text"] {
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

4. Text box style

We can also customize the text box of the input element . For example, you can set the background color and font size of the text box, as well as the color of the entered text. Here is an example:

input[type="text"] {
font-size: 16px;
color: #333;
background-color: #f2f2f2;
}

2. Radio button and check box styles

In addition to text input boxes, radio buttons and check boxes are also commonly used elements in forms. We can beautify them through CSS to achieve a better user experience.

1. Appearance modification

The appearance of radio buttons and check boxes is usually rendered by the browser's default style. However, by using CSS, we can modify these controls to suit our needs.

First, we need to add the following CSS rules to modify the appearance of radio buttons and checkboxes:

input[type="radio"], input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ccc;
border-radius: 50%;
width: 16px;
height: 16px;
outline: none;
transition: all 0.3s ease-in-out;
}

This code will hide the browser default radio button and checkbox styles and change them to circular.

2. Color and animation

We can also further beautify the radio buttons and check boxes by modifying their colors and animation effects.

The following code will set some simple animation effects for radio buttons and check boxes:

input[type="radio"]:checked, input[type="checkbox" ]:checked {
background-color: #000;
border-color: #000;
transition: all 0.3s ease-in-out;
}

This code Will add a simple background color and border color change when radio buttons and checkboxes are selected.

3. Button style

Button is one of the most commonly used elements in forms. The default button style often looks very old-fashioned, but through CSS, we can easily change the color, font, size and other attributes of the button.

1. Button color

We can beautify the buttons by modifying their background color and font color. The following code will add a background color gradient effect when the button is hovered:

button {
background: linear-gradient(#3180b8, #1e68a2);
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
transition: all 0.3s ease;
}

button:hover {
background: linear-gradient(#1e68a2, #3180b8);
}

2. Button size and font

We can also modify the size and font of the button to make it look more modern. The following code will increase the text size of the button and make it bold:

button {
font-size: 18px;
font-weight: bold;
padding: 10px 24px;
}

Conclusion

In web development, form elements are very common. The styling of these elements can be easily changed using CSS to make them look more modern and beautiful. This article explains how to use CSS to style input elements. When we are writing a form, we can customize the appearance of the form elements according to our needs and preferences using the methods described in this article.

The above is the detailed content of How to style an input element using CSS. For more information, please follow other related articles on the PHP Chinese website!