方法1：使用accent-color:

1
accent-color能修改 input 默认控件的颜色（也就是修改选中后的颜色）。
1
2
3
4
<body>
    <input type="radio">radio
    <input type="checkbox">checkbox
</body>
1
2
3
4
5
6
7
input[type=radio]{
       accent-color: red;
   }
 input[type=checkbox]{
     accent-color: blue;
 }

image.png

方法二：通过伪元素来实现

1
2
3
4
<body>
       <input type="checkbox" id="myCheckbox">
       <label for="myCheckbox">checkbox</label>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
   /*隐藏默认复选框  */
   input[type=checkbox]{
    display: none;
   }
   /*  创建自定义复选框*/
   input[type=checkbox]+label::before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 8px;
   }
   /* 自定义选中后的效果 */
   input[type=checkbox]:checked+label::before{
     background-color: red;
   }
    
</style>
1
2
3
4
5
6
7
input后面的lable标签：
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，
浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
label::before是伪元素用法，并不是表示label前面的一个元素，而是在label元素之前添加内容
1
2
3
4
5
ss的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
伪元素:before和:after用法：这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）
伪元素:before和:after添加的内容默认是inline元素
伪元素不属于文档，所以js无法操作它
伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

I