复选框、单选框的自定义样式

---恢复内容开始---

　　在很多时候，浏览器自带的单选框和复选框的样式不够美观，并且浏览器的样式之间带有差异。已经不足以我们生产的需求。下面用css来自定义修改一下单选框与复选框的样式。

　　首先我们先看一下例子的效果：

　　

　　上图是我这边例子的效果图，最后会将整个代码贴在最后，以供参考。

• 复选框自定义样式

　　复选框我们最经常遇到的问题，就是对号的样式多种多样，或者颜色多种。

　　这边自定义复选框样式的逻辑方法是：清楚复选框原来的样式，重新定义input的样式以及选中情况下的样式，对号可以使用图片填充。

　　复选框html内容如下：

<input type="checkbox" id="checkbox1"><label for="checkbox1">123</label>
<input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>

　　上面复选框的样式如下：

input[type="checkbox"] {
   20px;
  height: 20px;
  background-color: #fff;
  -webkit-appearance: none;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  outline: none;
}
input[type="checkbox"]:checked {
  background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
    no-repeat center;
  background-size: 100% 100%;
}

　　这里使用属性选择器选中复选框，appearance:none清除默认样式后重新设置样式。复选框被选中后使用图片填充。

• 单选框自定义样式

　　单选框自定义逻辑方法：清除radio的默认样式，使用伪元素模拟单选框样式。

　　性别例子html内容如下：

<p>您的性别：</p>
    <div class="radio-sex">
        <input type="radio" id="sex1" name="sex">
        <label for="sex1"></label>
        <span>男</span>
    </div>
    <div class="radio-sex">
        <input type="radio" id="sex2" name="sex">
        <label for="sex2"></label>女
    </div>

　　css内容如下：

.radio-sex {
  position: relative;
  display: inline-block;
  margin-right: 12px;
}

.radio-sex input {
  vertical-align: middle;
  /* 前面三行代码是为了让radio单选按钮与文字对齐 */
   20px;
  height: 20px;
  appearance: none; /*清楚默认样式*/
  -webkit-appearance: none;
  opacity: 0;
  outline: none;
  /* 注意不能设置为display:none*/
}

.radio-sex label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/
   20px;
  height: 20px;
  border: 1px solid #3582e9;
  border-radius: 100%;
}

.radio-sex input[type="radio"]:checked + label {
  background: #3582e9;
}

.radio-sex input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
   5px;
  height: 12px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}
.radio-sex span{
    vertical-align: middle;
}

　　单选框选中样式使用属性选择器、:checked选择器、相邻兄弟选择器和伪元素完成。当被选中时，对号通过设置右边框和下边框通过旋转45度实现效果。

　　其他关于颜色和数字的单选框样式和上边的例子差不多。

　　数字例子里面右下角的小对号是我通过引入阿里矢量库里面的icon实现的。

　　下面贴上整个代码以供参考：

<template>
    <div class="main">
        <div class="div">123</div>
        <input type="checkbox" id="checkbox1"><label for="checkbox1">123</label>
        <input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>
    <p>您的性别：</p>
    <div class="radio-sex">
        <input type="radio" id="sex1" name="sex">
        <label for="sex1"></label>
        <span>男</span>
    </div>
    <div class="radio-sex">
        <input type="radio" id="sex2" name="sex">
        <label for="sex2"></label>女
    </div>
    <p>喜欢的颜色：</p>
    <div class="radio-label">
        <input type="radio" id="color1" name="color">
        <label for="color1">蓝色</label>
    </div>
    <div class="radio-label">
        <input type="radio" id="color2" name="color">
        <label for="color2">红色22</label>
    </div>
    <div class="radio-label">
        <input type="radio" id="color3" name="color">
        <label for="color3">绿色333</label>
    </div>
    <span class="iconfont" style="color: red"></span>
    <p>喜欢的数字：</p>
    <div class="radio-check">
        <input type="radio" id="num1" name="num" :checked="num=='num1'" @click="num='num1'">
        <label for="num1">一1</label>
        <span class="iconfont iconq"></span>
    </div>
    <div class="radio-check">
        <input type="radio" id="num2" name="num" :checked="num=='num2'" @click="num='num2'">
        <label for="num2">二222222</label>
        <span class="iconfont iconq"></span>
    </div>
    <div @click="write()">点我输出你喜欢的数字：{{num}}</div>
    </div>
</template>
<script>
export default {
    name: 'input-component',
    data() {
        return {
            num:'num1'
        }
    },
    methods:{
        write(){
            
            console.log(this.num)
        }
    }
}
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 1313406 */
  src: url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.eot');
  src: url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.woff') format('woff'),
  url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.svg#iconfont') format('svg');
}
.main{
    padding:20px;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p{
    margin: 15px 0;
}
.div:before {
  content: url(http://www.w3school.com.cn/i/w3school_logo_white.gif);
}
input[type="checkbox"] {
   20px;
  height: 20px;
  background-color: #fff;
  -webkit-appearance: none;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  outline: none;
}
input[type="checkbox"]:checked {
  background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
    no-repeat center;
  background-size: 100% 100%;
}
.radio-sex {
  position: relative;
  display: inline-block;
  margin-right: 12px;
}

.radio-sex input {
  vertical-align: middle;
  /* 前面三行代码是为了让radio单选按钮与文字对齐 */
   20px;
  height: 20px;
  appearance: none; /*清楚默认样式*/
  -webkit-appearance: none;
  opacity: 0;
  outline: none;
  /* 注意不能设置为display:none*/
}

.radio-sex label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/
   20px;
  height: 20px;
  border: 1px solid #3582e9;
  border-radius: 100%;
}

.radio-sex input[type="radio"]:checked + label {
  background: #3582e9;
}

.radio-sex input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
   5px;
  height: 12px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}
.radio-sex span{
    vertical-align: middle;
}
/* 喜欢的颜色 */
.radio-label,
.radio-check {
  display: inline-block;
  position: relative;
}
.radio-label input[type="radio"] {
  appearance: none; /*清楚默认样式*/
  -webkit-appearance: none;
  /* opacity: 0; */
  outline: none;
  position: absolute;
  z-index: 2;
   6px;
  height: 6px;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  background: #b4b4b4;
}
.radio-label label {
  display: inline-block;
  min- 50px;
  height: 24px;
  line-height:24px;
  text-align: center;
  padding-right: 10px;
  border-radius: 5px;
  padding-left: 25px;
  color: #fff;
  background-color: #c9c9c9;
}
.radio-label input[type="radio"]:checked {
  opacity: 0;
}
.radio-label input[type="radio"]:checked + label {
  color: #fff;
  background-color: #3597db;
}
.radio-label input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 5px;
   5px;
  height: 12px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}
.iconq {
  font-size: 25px;
  position: absolute;
  right: -11px;
  bottom: -11px;
  z-index: 1;
  opacity: 0;
}

/* 喜欢的数字 */
.radio-check input[type="radio"] {
  appearance: none; /*清楚默认样式*/
  -webkit-appearance: none;
  /* opacity: 0; */
  outline: none;
  position: absolute;
  z-index: 2;
   100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #b4b4b4;
}
.radio-check input[type="radio"] {
  opacity: 0;
}
.radio-check label {
  display: inline-block;
  /* min- 50px; */
  height: 24px;
  line-height: 24px;
  text-align: center;
  padding-right: 10px;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  padding-left: 10px;
  cursor: pointer;
}
.radio-check input[type="radio"]:checked + label + span {
  color: #3597db;
  opacity: 1;
}
.radio-check input[type="radio"]:checked + label {
  border-color: #3597db;
}
.radio-check input[type="radio"]:hover + label {
  border-color: #3597db;
}
</style>

　　当然也还是有其他办法，通过动态绑定class也可以模拟单选框选中的样式。

　　以上代码以测试成功，欢迎留言。