在經(jīng)過對網(wǎng)上一些自定CheckBox的一番研究之后，現(xiàn)在綜合講一下該樣式實現(xiàn)的技巧。

先上圖：??

?

---

---

圖中已展示了多種樣式，實現(xiàn)的原理很簡單，一個外Box，一個內(nèi)Box，外Box顯示背景色，內(nèi)Box顯示白色背景，默認情況下內(nèi)Box靠左， CheckBox選擇之后，內(nèi)Box靠右，同時外Box變更背景色。

要實現(xiàn)CheckBox的效果一般是label套一個CheckBox再套一個span一實現(xiàn)，用label嵌套的好處是，用戶點擊文字就可以變更CheckBox的選定狀態(tài)，并且文字放在CheckBox的前或后都可以，代碼如下。

<label>Label文字<input type="checkbox" /><span class="apple-checkbox-span"></span> </label>

?

而實現(xiàn)的相關(guān)的css樣式就是在class ".apple-checkbox-span" 后面，增加一個內(nèi)Box，用:after實現(xiàn)，代碼如下:

.apple-checkbox input[type="checkbox"] {display: none; }/*默認顯示為正方形*/ .apple-checkbox-span {display: inline-block;margin-left: 1px;margin-bottom: 3px;width: 2em;height: 1em;vertical-align:middle;background-color: lightgray; /*默認顏色*/border-radius: 4px;transition-duration: .5s; /*動畫*/-webkit-transition-duration: .5s; /* Safari */ }.apple-checkbox-span:after {display: inline-block;content: '';width: 50%;height: 100%;border: 2px solid lightgray;background-color: white;border-radius: 4px;float:left;transition-duration: .5s; /*動畫*/-webkit-transition-duration: .5s; /* Safari */}/*默認顯示藍色*/ .apple-checkbox input[type="checkbox"]:checked + .apple-checkbox-span {background-color: deepskyblue; }.apple-checkbox input[type="checkbox"]:checked + .apple-checkbox-span:after {border-color: deepskyblue;margin-left:50%;}

?

?

而實現(xiàn)變更顏色的方法就是class中添加顏色的類名，代碼為class="顏色類名"， 而css只需建立覆蓋CheckBox點擊后的樣式即可。

HTML

<label>紅色<input type="checkbox" /><span class="apple-checkbox-span red"></span> </label>

CSS

.apple-checkbox input[type="checkbox"]:checked + .apple-checkbox-span.red {background-color: orangered;}.apple-checkbox input[type="checkbox"]:checked + .apple-checkbox-span.red:after {border-color: orangered;}

?

?

對于CheckBox圖形根據(jù)Label字體大小變化而變化的技巧是，尺寸單位需要使用em來定義，因為em是根據(jù)使用的字體大小而變化的一個單位，我們設(shè)置父標簽Label的字體大小之后，span就自動繼承了label的字體大小，寬高的通常設(shè)置是寬度是高度的兩倍，當高度是1em，寬度就需要是2em，比如字體大小是14px，1em就等于14px，2em就等于28px，以此類推，參考代碼：

HTML

<label style="font-size:30px">變更了字體大小30px<input type="checkbox" /><span class="apple-checkbox-span"></span> </label>

?

CSS

.apple-checkbox-span {width: 2em;height: 1em; }

?

?

最后要講的是自定義文字和尺寸，定義文字就是內(nèi)Box要顯示的文字，可以內(nèi)嵌css變更content的內(nèi)容實現(xiàn)，而變更尺寸，則需要直接編寫內(nèi)嵌的css來覆蓋width和height

<label id="ManualChar" style="font-size:30px">自定義文字<input type="checkbox" /><span class="apple-checkbox-span circle"></span></label> <style type="text/css">#ManualChar .apple-checkbox-span:after {content: "彈"; /*添加文字*/font-size: 0.6em; /*字體大小根據(jù)實際需要調(diào)整*/font-weight: normal;padding-top: 1px;padding-left: 4px;} </style>
<label id="ManualSize" style="font-size:30px">自定義寬度<input type="checkbox" /><span class="apple-checkbox-span circle"></span></label> <style type="text/css">#ManualSize .apple-checkbox-span {height: 30px; /*覆蓋寬度*/width: 400px; /*覆蓋高度*/}#ManualSize .apple-checkbox-span:after {content: "祖國的花朵"; /*添加文字*/width: 105px; /*寬度根據(jù)字數(shù)多少調(diào)整*/font-size: 0.6em; /*字體大小根據(jù)實際需要調(diào)整*/font-weight: normal;padding-top: 1px;padding-left: 4px;}#ManualSize input[type="checkbox"]:checked + .apple-checkbox-span:after {margin-left: 295px; /*點擊之后塊位置，需要根據(jù)塊的寬度調(diào)整 400px-105px=295px;*/} </style>

?

如對上述的代碼有任何疑問，歡迎各位留言。

?附上源碼：? CheckBox

?

轉(zhuǎn)載于:https://www.cnblogs.com/Firstwing/p/9542911.html

總結(jié)

以上是生活随笔為你收集整理的[原创] CSS自定义IOS苹果，Android安卓的CheckBox 效果，可以根据文字大小变化而变化，内框显示文字，另外可自定大小，自定颜色...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。