CSS3結合fontawesome字型實現自訂單選框複選框效果

經常能看到別人做前端的時候，實現一些漂亮的複選框或單選框按鈕，由於現在項目原因，很多單選框和複選框看起來很不好看，於是，心血來潮打算自己實現了一遍。

一、首先上css代碼：

1. 其中，說明我以注釋的形式寫到裡面；

2. 關於z-index我是基於一開始的定位考慮來設定的，此處如果誰要用到，自行思考；

/*複選框效果*/input[type=checkbox] {    width:16px;    height:16px;    z-index:10;}  /* 此處不解釋，定義的是複選框寬高*/input[type=checkbox]::before {    content:" ";    display:inline-block;    color:#000;    width:16px;    height:16px;    background:#fff;    border:1px #1ab394 solid;    z-index:9;    position: absolute;}/* 此處定義的是在沒有選中的情況下的樣式，利用::before設定空的content實現 */input[type=checkbox]:checked::before {    content:"\f00c";    color:#1ab394;     font: normal normal normal 14px/1 FontAwesome;     font-size: inherit;     text-rendering: auto;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;} /* 此處定義複選框選中時候的樣式，此處 在before的content裡使用\f00c的awesome字型來實現，這個字型值表示打勾*//* 單選框效果 */input[type=radio] {    width:16px;    height:16px;    z-index:10;}input[type=radio]::before {    content:" ";    display:inline-block;    color:#000;    width:16px;    height:16px;    border-radius:8px;    background:#fff;    border:1px #1ab394 solid;    z-index:9;    position: absolute;}input[type=radio]:checked::after {    content:" ";    display:inline-block;    width:8px;    height:8px;    background:#1ab394;    border-radius:50%;    position:absolute;    z-index:11;    top:4px;    left:4px;} /*以上的單選框和複選框類似，但此處選中不是採用更換字型，目前來說，沒發現有適合的字型適用於裡面的圓點，所以採用after設定一個長寬為8像素的塊並設定圓角調整位置放到外層邊框內容裡實現*/

二、最後呈現的效果：

以是我應用的實際。

經常能看到別人做前端的時候，實現一些漂亮的複選框或單選框按鈕，由於現在項目原因，很多單選框和複選框看起來很不好看，於是，心血來潮打算自己實現了一遍。

一、首先上css代碼：

1. 其中，說明我以注釋的形式寫到裡面；

2. 關於z-index我是基於一開始的定位考慮來設定的，此處如果誰要用到，自行思考；

/*複選框效果*/input[type=checkbox] {    width:16px;    height:16px;    z-index:10;}  /* 此處不解釋，定義的是複選框寬高*/input[type=checkbox]::before {    content:" ";    display:inline-block;    color:#000;    width:16px;    height:16px;    background:#fff;    border:1px #1ab394 solid;    z-index:9;    position: absolute;}/* 此處定義的是在沒有選中的情況下的樣式，利用::before設定空的content實現 */input[type=checkbox]:checked::before {    content:"\f00c";    color:#1ab394;     font: normal normal normal 14px/1 FontAwesome;     font-size: inherit;     text-rendering: auto;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;} /* 此處定義複選框選中時候的樣式，此處 在before的content裡使用\f00c的awesome字型來實現，這個字型值表示打勾*//* 單選框效果 */input[type=radio] {    width:16px;    height:16px;    z-index:10;}input[type=radio]::before {    content:" ";    display:inline-block;    color:#000;    width:16px;    height:16px;    border-radius:8px;    background:#fff;    border:1px #1ab394 solid;    z-index:9;    position: absolute;}input[type=radio]:checked::after {    content:" ";    display:inline-block;    width:8px;    height:8px;    background:#1ab394;    border-radius:50%;    position:absolute;    z-index:11;    top:4px;    left:4px;} /*以上的單選框和複選框類似，但此處選中不是採用更換字型，目前來說，沒發現有適合的字型適用於裡面的圓點，所以採用after設定一個長寬為8像素的塊並設定圓角調整位置放到外層邊框內容裡實現*/

二、最後呈現的效果：

以是我應用的實際。