關鍵技術點和原理：

原理就是把 checkbox或 radio 給隱藏掉 ? ，然后給選框 綁定一個label標簽。

然后用label標簽作為容器，在里面放一個：before或一個after

用before模擬選框的框，用after來模擬選框的填充

通過

.magic-checkbox:checked + label:after {/*選框被選中時 顯示after填充*/display: block;}

?來確定是否選中復選框，如果checked就把after的顯示。

?先貼出html的代碼

<div id="main"><div class="demo"><div class="col"><h4>Checkbox(復選按鈕)</h4><div class="opt"><input class="magic-checkbox" type="checkbox" name="layout" id="c1"><label for="c1">Normal</label></div><div class="opt"><input class="magic-checkbox" type="checkbox" name="layout" id="c2" checked><label for="c2">Checked</label></div><div class="opt"><input class="magic-checkbox" type="checkbox" name="layout" id="c3" value="option2" disabled><label for="c3" style="color:#ccc">Disabled</label></div><div class="opt"><input class="magic-checkbox" type="checkbox" name="layout" id="c4" checked disabled><label for="c4" style="color:#ccc">Checked && Disabled</label></div></div><div class="col"><h4>Radio(單選按鈕)</h4><div class="opt"><input class="magic-radio" type="radio" name="radio" id="r1" value="option1"><label for="r1">Normal</label></div><div class="opt"><input class="magic-radio" type="radio" name="radio" id="r2" value="option2" checked><label for="r2">Checked</label></div><div class="opt"><input class="magic-radio" type="radio" name="radio" id="r3" value="option3" disabled><label for="r3" style="color:#ccc">禁用</label></div><div class="opt"><input class="magic-radio" type="radio" id="r4" value="option4" checked disabled><label for="r4" style="color:#ccc">Checked && Disabled</label></div></div></div></div>

首先html的結構必須是

<div class="opt"><input class="magic-checkbox" type="checkbox" name="layout" id="c1"><label for="c1">Normal</label> </div>

　　切記

<input class="magic-checkbox" type="checkbox" name="layout" id="c1"><label for="c1">Normal</label>

id和for的值一定要一致 ? ?這是通用寫法 ? ?為了把label和input綁定在一塊

下面給出css代碼

/*--相關的單選復選按鈕--*/ @keyframes hover-color { /**復選框或單選框 邊框 hover**/from {border-color: #c0c0c0; }to {border-color: #3e97eb; } }.magic-radio, .magic-checkbox { /**必須要把 radio和 checkbox的隱藏或者切割掉**/position: absolute;display: none; }.magic-radio[disabled], /**radio checkbox 指定disabled html屬性時的鼠標指針**/ .magic-checkbox[disabled] {cursor: not-allowed; }.magic-radio + label, .magic-checkbox + label {position: relative;display: block;padding-left: 30px;cursor: pointer;vertical-align: middle;}.magic-radio + label:hover:before, /*選礦的 hover邊框動畫 */.magic-checkbox + label:hover:before {animation-duration: 0.4s;animation-fill-mode: both;animation-name: hover-color; }.magic-radio + label:before,.magic-checkbox + label:before {/*用before來模擬選框的框*/position: absolute;top: 0;left: 0;display: inline-block;width: 20px;height: 20px;content: '';border: 1px solid #c0c0c0; }.magic-radio + label:after,.magic-checkbox + label:after {/*用after模擬選框的 對號或園點 默認先隱藏*/position: absolute;display: none;content: '';}.magic-radio[disabled] + label, .magic-checkbox[disabled] + label {/*選框 被禁用時的外觀*/cursor: not-allowed;color: #e4e4e4;}.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,.magic-checkbox[disabled] + label:hover,.magic-checkbox[disabled] + label:before,.magic-checkbox[disabled] + label:after {cursor: not-allowed; }/*禁用時的指針*/.magic-radio[disabled] + label:hover:before,.magic-checkbox[disabled] + label:hover:before {border: 1px solid #e4e4e4;animation-name: none; }/*禁用時的選框和填充*/.magic-radio[disabled] + label:before,.magic-checkbox[disabled] + label:before {border-color: #e4e4e4; }.magic-radio:checked + label:before, .magic-checkbox:checked + label:before {animation-name: none; }/*選框被選中時 去掉hover 動畫*/.magic-radio:checked + label:after, .magic-checkbox:checked + label:after {/*選框被選中時 顯示after填充*/display: block;}.magic-radio + label:before {/*radio的選框應該是個圓形*/border-radius: 50%; }.magic-radio + label:after {/*模擬出radio的園點填充*/top: 7px;left: 7px;width: 8px;height: 8px;border-radius: 50%;background: #3e97eb; }.magic-radio:checked + label:before {border: 1px solid #3e97eb; }.magic-radio:checked[disabled] + label:before {border: 1px solid #c9e2f9; }.magic-radio:checked[disabled] + label:after {background: #c9e2f9; }.magic-checkbox + label:before {border-radius: 3px; }.magic-checkbox + label:after {/*模擬出checkbox選框的對號填充*/top: 2px;left: 7px;box-sizing: border-box;width: 6px;height: 12px;transform: rotate(45deg);border-width: 2px;border-style: solid;border-color: #fff;border-top: 0;border-left: 0; }.magic-checkbox:checked + label:before {border: #3e97eb;background: #3e97eb; }.magic-checkbox:checked[disabled] + label:before {border: #c9e2f9;background: #c9e2f9; }

?下面是 代碼運行效果

demo：?

?

下面附贈一個手風琴效果（原理基本上也差不多） 也是在 ? ? ? ：check的時候做一些事情 demo 用checkbox和radio實現手風琴效果

?

轉載于:https://www.cnblogs.com/xiaobie123/p/6354474.html

總結

以上是生活随笔為你收集整理的纯css3实现美化复选框和手风琴效果（详细）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。