纯css3美化checkbox、radio默认样式
时间:07-30来源:作者:点击数:26
一、效果展示
二、实现步骤
- -webkit-appearance: none;
- appearance: none;
- outline: none;
- input[type=checkbox]:checked::after
三、全部实现代码(直接复制到xxx.html就能看到效果)
- <html>
- <head>
- <style>
- label {
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- input[type=checkbox],input[type=radio] {
- -webkit-appearance: none;
- appearance: none;
- outline: none;
- width: 12px;
- height: 12px;
- cursor: pointer;
- vertical-align: center;
- background: #fff;
- border: 1px solid #ccc;
- position: relative;
- }
-
- input[type=checkbox]:checked::after {
- content: "\2713";
- display: block;
- position: absolute;
- top: -1px;
- left: -1px;
- right: 0;
- bottom: 0;
- width: 10px;
- height: 10px;
- line-height: 10px;
- border: 1px solid #ddd;
- color: red;
- font-size: 12px;
- }
- input[type=radio]:checked::after {
- content: "";
- display: block;
- position: absolute;
- top: 2px;
- left: 2px;
- right: 0;
- bottom: 0;
- width: 6px;
- height: 6px;
- background-color: red;
- }
- input[type=radio], input[type=radio]:checked::after {
- border-radius: 50%;
- }
- </style>
- </head>
-
- <body>
- <label><input type="checkbox" />1111</label>
- <label><input type="checkbox" />222</label>
- <label><input type="radio" name="test"/>aaa</label>
- <label><input type="radio" name="test"/>bbb</label>
- </body>
-
- </html>