How to style an input element using CSS
Apr 21, 2023 am 11:23 AMCSS 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
- 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;
}
- 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;
}
- 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);
}
- 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.
- 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.
- 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.
- 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);
}
- 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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

What is useEffect? How do you use it to perform side effects?

How does currying work in JavaScript, and what are its benefits?

What are higher-order functions in JavaScript, and how can they be used to write more concise and reusable code?

How does the React reconciliation algorithm work?

What is useContext? How do you use it to share state between components?

How do you prevent default behavior in event handlers?

What are the advantages and disadvantages of controlled and uncontrolled components?
