使用CSS實現自定義input[checkbox]樣式

時間 2019-11-19

標籤使用 css 實現自定義 input checkbox 樣式欄目 CSS 简体版

原文原文鏈接

思路：使用label上的for熟悉，與checkbox上的id相對應來達到點擊選中效果，在使用僞元素，或者其餘元素，定位至checkbox上方，替代checkbox，而且隱藏checkbox，使用CSS3選擇器：checked + 毗鄰選擇器，選中後給僞元素，或者其餘元素添加選中樣式；css

兼容：

：after 兼容IE8+

: checked 兼容IE9+

綜上述：自定義樣式兼容IE9+

可以使用IE8hack的方式，讓IE8-使用原來的checkbox樣式

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .label1 {
            position: relative;
        }
        .label1:after {
            position: absolute;
            top: 0px;
            left: -22px;
            width: 16px;
            height: 16px;
            background: #ededed;
            border: 1px solid #dcdcdc;
            content: '';
        }
        form input[type='checkbox']:checked + .label1:after {
            background: red;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="checkbox" name="a" id="a1" onchange="check()">
        <label class="label1" for="a1">記住密碼</label>
    </form>

</body>
</html>

使IE8-可以正常使用本來樣式的checkbox方法：

上方代碼使用after僞元素覆蓋了input，並無使用css隱藏掉input，爲的就是在IE8-的時候能隱藏爲元素，使用原來的checkbox，這裏就要運用到單獨爲IE8書寫的hack了

    .label1 {
            position: relative;
            color: red\0;  /*IE8+都能使用這條樣式,這行需寫在IE7hack之上，在win10中測試的時候發現，IE7執行了該行樣式，可是數值爲空*/
            +color: red;    /*IE7才能使用這條樣式*/
        }
        form:nth-child(1) .label1 {  /* IE9+才能使用的樣式*/
            color: green;
        }
結構參考上面的代碼

如上樣式，在IE7和IE8中字體爲紅色，IE9+和其餘經常使用瀏覽器則爲綠色，這樣就能達到在低版本瀏覽器中使用自帶checkbox，高版本瀏覽器使用自定義樣式的checkbox了，仍是挺使用的；

若是有更好的實現和兼容方式，請在評論中告知，謝謝了；

一些漂亮的樣式能夠參考下這個博客

http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml