If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

部落格全站分類：數位生活

BloggerAds

Dec 14 Thu 2017 23:22
改變單選或者復選框的樣式 - iriliguo

文章出處

原理是通過定位把以前的樣式覆蓋掉，就醬...

代碼如下：

css

  .checkbox
        {
            position: relative;
            padding-left: 8px;
        }
        .checkbox:before{
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #999;
            border-radius: 50%;
            background: #fff;
            position: absolute;

        }
        input[type=checkbox]:checked:before{
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 100%;
            background: #999;
            position: absolute;
            top: 5px;
            left: 13px;
        }
        input[type=checkbox]{
            margin-right: 6px;
        }

html


<p>改變單選或者復選框的樣式
    <label class="checkbox"><input name="1" type="checkbox">11</label>
    <label class="checkbox"><input name="1" type="checkbox" >22</label>
</p>