本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何自定義checkbox樣式？附代碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

修改原生checkbox樣式。

效果

原理

1.利用CSS3屬性 appearance。

該屬性(強(qiáng)制)更改(改變)默認(rèn)(原生)樣式。

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

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

2.利用:checked選擇器

當(dāng)checkbox被選中的時(shí)候改變樣式。

3. :after選擇器 + content屬性

:after選擇器向元素之后插入內(nèi)容。

我們?cè)倮胻ext-aligen和line-height讓內(nèi)容正居中就行了。

源碼

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: "?";

}

以上就是對(duì)如何自定義checkbox樣式？附代碼的全部介紹，如果您想了解更多有關(guān)CSS3視頻教程，請(qǐng)關(guān)注PHP中文網(wǎng)。

總結(jié)

以上是生活随笔為你收集整理的php复选框样式,如何自定义checkbox样式？附代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。