美化修改radio、checkbox的樣式
原理:大致原理都是使用原生的checkbox或input標籤,在其後面設定相關聯的label元素。給<input>元素設定為透明,然後通過定位讓使用者看到的是<label>元素,利用css的原生屬性來判斷使用者的操作,設定選中後的label樣式,即
input[type=checkbox]:checked+label{}
一、利用css3偽元素實現樣式修改
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; margin-top: -2px; margin-bottom: 1px; /* 前面三行程式碼是為了讓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:checked+label { background: #3582E9; } .radio-sex input:checked+label::after { content: ""; position: absolute; left: 8px; top: 2px; width: 5px; height: 12px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); }
優點:充分藉助了CSS3的優勢,無需使用js和圖片,僅用純CSS3就可搞定
缺點:相容性較差,僅支援IE9+
html
<div class="radio-item"> <input type="radio" name="zhiye" id="" value=""/> <label> <i class="disc"></i> <i class="active"></i> </label> <span>視覺設計師</span> </div> <div class="radio-item"> <input type="radio" name="zhiye" id="" value=""/> <label> <i class="disc"></i> <i class="active"></i> </label> <span>互動設計師</span> </div> <div class="radio-item"> <input type="radio" name="zhiye" id="" value=""/> <label> <i class="disc"></i> <i class="active"></i> </label> <span>前端工程師</span> </div>
CSS樣式
.radio-item {
position: relative;
width: 132px;
height: 44px;
line-height: 44px;
float: left;
margin-right: 12px;
}
.radio-item input {
width: 120px;
height: 44px;
opacity: 0;
appearance: none;
position: absolute;
left: 0;
top: 0;
}
.radio-item label {
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 36px;
line-height: 36px;
padding: 4px 6px;
background-color: #EFEFEF;
border-radius: 6px;
z-index: -1;
display: flex;
align-items: center;
}
.radio-item label i {
display: inline-block;
margin-left: 6px;
}
.radio-item label i.disc {
width: 8px;
height: 8px;
background: #333;
border-radius: 100%;
}
.radio-item label i.active {
width: 12px;
height: 6px;
border-left: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
transform: rotate(-45deg);
display: none;
}
.radio-item span {
margin-left: 32px;
}
.radio-item input:checked + label {
background: #3698DB;
color: #FFFFFF;
}
.radio-item input:checked + label i.disc {
display: none;
}
.radio-item input:checked + label i.active {
display: block;
}
.radio-item input:checked + label + span {
color: #FFFFFF;
}
二、利用圖片實現樣式修改
實現思路 1.設定input 屬性hidden對該input進行隱藏
<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
2.藉助label for標籤通過id繫結input ,這樣在點選label時實際就是點選了input
<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
<label for="adviceRadio1" class="advice"></label>
3.定義label的樣式,設定未選中狀態的背景圖
.advice{
height: 12px;
width: 12px;
display: inline-block;
background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-top: -4px;
}
4.使用相鄰選擇器設定選中狀態label的樣式
input[type="radio"]:checked + .advice{
background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
}
以上是radio單選框的實現程式碼,checkbox也是類似 將input type定義成checkbox即可
三、利用外掛實現
awesome-bootstrap-checkbox外掛
awesome-bootstrap-checkbox是一款可以美化Bootstrap複選框和單選按鈕的外掛。它使用純CSS編寫,沒有任何的javascript檔案。它通過在原生Bootstrap元件的基礎上做一些小改動,即可完成漂亮的美化效果。
演示地址:http://awesome-bootstrap-checkbox.okendoken.com/demo/index.html
外掛下載:https://www.bootcdn.cn/pretty-checkbox/
注:需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome對應的字型font檔案
pretty.css外掛
pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字型圖示結合使用,對原生的checkbox和radio進行美化,還可以製作按鈕點選時的動畫效果。
演示地址:http://www.htmleaf.com/Demo/201708164688.html
外掛下載:http://www.htmleaf.com/css3/ui-design/201708164687.html