Home > Article > Web Front-end > How to customize checkbox style? Attached code
How to customize checkbox style? Attached code
- 云罗郡主forward
- 2018-10-11 16:35:543151browse
The content of this article is about how to customize the checkbox style? The code is attached, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Modify the native checkbox style.
Effect
Principle
1. Use the CSS3 attribute appearance.
This attribute (forced) changes (changes) the default (native) style.
Firefox supports the alternative -moz-appearance attribute; Safari and Chrome support the alternative -webkit-appearance attribute; IE does not support this attribute.
So you can use this attribute to cancel the native style of the checkbox.
2. Use:checked selector
Change the style when the checkbox is selected.
3. :after selector content attribute
:The after selector inserts content after the element.
We can then use text-aligen and line-height to center the content.
Source code
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>checkbox</title>
<style>
input {
width: 16px;
height: 16px;
margin-top: 0;
background-color: #fff;
border: 1px solid #c9c9c9;
border-radius: 2px;
color: #fff;
text-align: center;
line-height: 15px;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
appearance:none;
outline: none;
}
input:hover {
border-color: #43adea;
}
input:checked {
color: #fff;
background-color: #43adea;
border: 1px solid #43adea;
}
input:after {
content: "✔";
}
</style></head><body>
<input type="checkbox">
<input type="checkbox"></body></html>The above is how to customize the checkbox style? Attached is a full introduction to the code. If you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How to customize checkbox style? Attached code. For more information, please follow other related articles on the PHP Chinese website!