Css實現checkbox及radio樣式自定義

前言

checkbox和radio樣式自定義在網頁中是很常見的， 好比在進行表單輸入時性別的選擇，用戶註冊時選擇已閱讀用戶協議。隨着用戶對產品體驗要求愈來愈高，咱們都會對checkbox和radio從新設計，checkbox默認的樣式很是醜 ，沒法直接修改checkbox和radio的樣式，這裏咱們藉助label標籤來對它進行樣式美化。

先看實現效果圖，以下：

實現思路

1.設置input 屬性hidden對該input進行隱藏，或者經過display:none也能夠

<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');
				}
複製代碼

實現代碼

請選擇反饋的問題：
			<label>
		    	<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
			    <label for="adviceRadio1" class="advice"></label>
			    <span class="radio-name">問題</span>
		    </label>
		    <label>
		    	<input type="radio" name="type" id="adviceRadio2" value="2" hidden/>
			    <label for="adviceRadio2" class="advice"></label>
			    <span class="radio-name">建議</span>
		    </label>
		    <span id="result">1</span>
		    <style type="text/css">
		    	.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;
				}
				input[type="radio"]:checked + .advice{
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
				}
		    </style>
複製代碼

以上是radio單選框的實現代碼，checkbox也是相似 將input type定義成checkbox便可

獲取radio及checkbox選中的值

1.獲取radio的值 使用jquery獲取radio的值有3種方式：

$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
複製代碼

2.獲取checkbox的值

var obj = document.getElementsByName("hobby");
		         var check_val = [];
		         for(k in obj){
		         	if(obj[k].checked){
		         		check_val.push(obj[k].value);
		         	}
		         }
複製代碼

遇到的坑

一開始寫的時候，我是使用僞元素的方式實現，先將input進行隱藏 ，而後設置input:after定義它的樣式,代碼以下：

//html
<input type="radio" name="sex" id="male" /><label for="male"> Male</label>

//css
input[type=radio]{
            visibility: hidden;
        }
        input[type=radio]:checked::after{
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -59px -10px;
            visibility: visible;
        }
        input[type=radio]::after{
            content: ' ';
            display: block;
            height: 20px;
            width: 20px;
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -24px -10px;
            visibility: visible;
        }
複製代碼

可是後來發現這種方式兼容性有問題，在firefox瀏覽器沒法顯示，經查資料是由於input不支持僞元素:after,:before 。 火狐瀏覽器沒法插入內容DOM元素，僞元素都是在容器內進行渲染的。input沒法容納其餘元素，所以它不支持僞元素。 input，img，iframe等元素都不能包含其餘元素，因此不能經過僞元素插入內容。至於Chrome 中checkbox和radio能夠插入應該就是bug了 input要配合其它容器元素（i,span）等實現預期效果

戳我在線查看demo

完整的代碼我已經上傳到了github.com/fozero/fron…，能夠點擊查看，若是以爲還不錯的話，記得star一下哦！

相關資料

https://www.cnblogs.com/u-drive/p/7888155.html https://fatesinger.com/74438

做者：fozero 聲明：原創文章，轉載請註明出處，謝謝！www.cnblogs.com/fozero/p/89… 標籤：radio,checkbox美化