本篇文章給大家帶來的內容是關于如何自定義checkbox樣式？附代碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

修改原生checkbox樣式。

效果

原理

1.利用CSS3屬性 appearance。

該屬性(強制)更改(改變)默認(原生)樣式。

Firefox 支持替代的 -moz-appearance 屬性；Safari 和 Chrome 支持替代的 -webkit-appearance 屬性；IE不支持該屬性。

所以可以利用該屬性取消checkbox的原生樣式。

2.利用:checked選擇器

當checkbox被選中的時候改變樣式。

3. :after選擇器 + content屬性

:after選擇器向元素之后插入內容。

我們再利用text-aligen和line-height讓內容正居中就行了。

源碼

checkbox

input {

width: 16px;

height: 16px;

margin-top: 0;

background-color: #fff;

border: 1px solid #c9c9c9;

border-radius: 2px;

color: #fff;

text-align: center;

line-height: 15px;

-webkit-appearance:none;

-moz-appearance:none;

-ms-appearance:none;

-o-appearance:none;

appearance:none;

outline: none;

}

input:hover {

border-color: #43adea;

}

input:checked {

color: #fff;

background-color: #43adea;

border: 1px solid #43adea;

}

input:after {

content: "?";

}

以上就是對如何自定義checkbox樣式？附代碼的全部介紹，如果您想了解更多有關CSS3視頻教程，請關注PHP中文網。