CSS自定义input[type=checkbox]样式

对于checkbox,有时候为了美观,我们需要对其自定义样式。

如:现有禁用的checkbox用于查看页面,默认样式:

CSS自定义input[type=checkbox]样式

我们对其样式调整:

input[type=checkbox]:checked:disabled { appearance: none; -moz-appearance: none; -webkit-appearance: none; width: 13px; height: 13px; position: relative; border: 1px solid rgba(0, 119, 255, 0.7); border-radius: 2px; overflow: hidden; }
    input[type=checkbox]:checked:disabled::before { content: ''; display: block; height: 13px; width: 13px; background: rgba(0, 119, 255, 0.6); position: absolute; top: -1px; left: -1px; border-radius: 2px; }
    input[type=checkbox]:checked:disabled::after { content: '」'; display: block; width: 10px; height: 10px; transform: rotate( 40deg ); position: absolute; top: 1px; left: 2px; overflow: hidden; color: #fff; font-weight: bold; line-height: 6px; }

调整后样式:

CSS自定义input[type=checkbox]样式

对比未禁用的样式:

CSS自定义input[type=checkbox]样式

 看起来高度还原了原本样式,达到了只调整了颜色的效果。

上一篇:获取到页⾯中所有的checkbox怎么做?


下一篇:jQuery map() 方法