復選框、單選框的自定義樣式

---恢復內容開始---

　　在很多時候，瀏覽器自帶的單選框和復選框的樣式不夠美觀，並且瀏覽器的樣式之間帶有差異。已經不足以我們生產的需求。下面用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"] {
  width: 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單選按鈕與文字對齊 */
  width: 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而不能單選*/
  width: 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;
  width: 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"] {
  width: 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單選按鈕與文字對齊 */
  width: 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而不能單選*/
  width: 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;
  width: 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;
  width: 6px;
  height: 6px;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  background: #b4b4b4;
}
.radio-label label {
  display: inline-block;
  min-width: 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;
  width: 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;
  width: 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-width: 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也可以模擬單選框選中的樣式。

　　以上代碼以測試成功，歡迎留言。