純css製作漂亮的複選框與單選按鈕

我們都知道html中原生的checkbox與radio樣式是非常的丑,而且怎麼美化都不好看,很多前端工程師都會用設計好的2張圖片去模擬複選框與單選按鈕,這種方法可以實現好看的複選框與單選按鈕,但是要更改樣式還需要重新做圖也是比較麻煩的。今天給大家推薦一種純css+html實現好看的複選框與單選按鈕,而且可以靈活美化樣式,請看效果圖,如果大家覺得不好看完全可以自己改改css樣式。

工具/原料

前端工具HBuilder
css+html

方法/步驟

html代碼如下:

<body>

<h2>複選框</h2>

<div>

語文<input type="checkbox" id="語文" class="gcs-checkbox">

<label for="語文"></label>

數學<input type="checkbox" id="數學" class="gcs-checkbox">

<label for="數學"></label>

英語<input type="checkbox" id="英語" class="gcs-checkbox">

<label for="英語"></label>

計算機<input type="checkbox" id="計算機" class="gcs-checkbox">

<label for="計算機"></label>

</div> <br />

<hr />

<h2>單選按鈕</h2>

<div>

男<input type="radio" name="sex" class="gcs-radio" id="男" />

<label for="男"></label>

女<input type="radio" name="sex" class="gcs-radio" id="女" />

<label for="女"></label>

</div>

<hr />

</body>

樣式代碼如下:

<style type="text/css">

/*複選框*/

.gcs-checkbox {

display: none;

}

.gcs-checkbox+label {

background-color: white;

border-radius: 0px;

border: 1px solid #d3d3d3;

width: 20px;

height: 20px;

display: inline-block;

text-align: center;

vertical-align: bottom;

line-height: 20px;

}

.gcs-checkbox+label:hover {

cursor: pointer;

border: 1px solid #2783FB;

}

.gcs-checkbox:checked+label {

background-color: #eee;

background: #2783FB;

}

.gcs-checkbox:checked+label:after {

content: "\2714";

color: white;

}

/*單選按鈕*/

.gcs-radio {

display: none;

}

.gcs-radio+label {

width: 20px;

height: 20px;

line-height: 20px;

display: inline-block;

text-align: center;

vertical-align: bottom;

border: 1px solid gray;

border-radius: 50%;

}

.gcs-radio+label:hover {

border: 1px solid #2783FB;

cursor: pointer;

}

.gcs-radio:checked+label {

background: #2783FB;

border: 1px solid #2783FB;

}

.gcs-radio:checked+label:after {

content: "\2022";

font-size: 35px;

color: white;

}

</style>

注意事項

我們這裡巧妙的利用label的for屬性去模擬checkbox與radio的單擊事件
label 的for屬性必須與checkbox或radio的id相同

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場