CSS writing radio button style
CSS Radio Button Style
In web development, radio buttons are a common interactive element used to allow users to choose between several mutually exclusive options. The default radio button styles don’t always meet your design needs, so you often need to customize them.
Basic Styles
In CSS, you can customize the style of radio buttons using simple properties, such as background color, border color, and size. Here’s a basic radio button style:
input[type="radio"] {
width: 18px;
height: 18px;
border: 2px solid #333;
border-radius: 50%;
}
input[type="radio"]:checked {
background-color: #333;
}
In the code above, we set a fixed width and height for the radio button and add a rounded border. When the button is checked, the background color changes to gray. This is a simple but effective style that makes the radio button more aesthetically pleasing.
Custom Styles
In addition to basic styles, we can also use pseudo-elements to achieve more complex styles. For example, we can use pseudo-elements to achieve a custom look, as shown below:
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
padding-left: 30px;
cursor: pointer;
}
input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
}
input[type="radio"]:checked + label:before {
background-color: #333;
}
In the code above, we use the :before pseudo-element to add a circular style to the radio button’s label. When the button is selected, the circle turns gray. This approach allows for greater flexibility in customizing the appearance of radio buttons.
Complete Example
Here is a complete example code showing how to use CSS to customize the style of radio buttons:
<!DOCTYPE html>
<html Tutorial">html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
padding-left: 30px;
cursor: pointer;
}
input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
}
input[type="radio"]:checked + label:before {
background-color: #333;
}
</style>
</head>
<body>
<input type="radio" id="radio1" name="radios">
<label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="radios">
<label for="radio2">Option 2</label>
<input type="radio" id="radio3" name="radios">
<label for="radio3">Option 3</label>
</body>
</html>
In the example above, we use the :before pseudo-element to add a circle style to each radio button’s label. When the button is selected, the circle turns gray. Each radio button’s label is associated with its corresponding id using the for attribute.
Running Results
The running results of the above sample code are as follows:
- [ ] Option 1
- [ ] Option 2
- [ ] Option 3
Through the above sample code, we can see how to use CSS to customize the style of radio buttons. By flexibly utilizing CSS properties and pseudo-elements, we can add various styling effects to radio buttons to make them more suitable for our design needs.