900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html改变复选框颜色 如何利用纯CSS改变html?radio/checkbox默认背景颜色样式

html改变复选框颜色 如何利用纯CSS改变html?radio/checkbox默认背景颜色样式

时间:2021-12-24 18:34:17

相关推荐

html改变复选框颜色 如何利用纯CSS改变html?radio/checkbox默认背景颜色样式

本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

CSS代码:input[type=checkbox] {

margin-right: 5px;

cursor: pointer;

font-size: 14px;

width: 15px;

height: 12px;

position: relative;

}

input[type=checkbox]:after {

position: absolute;

width: 10px;

height: 15px;

top: 0;

content: " ";

background-color: #ff0000;

color: #fff;

display: inline-block;

visibility: visible;

padding: 0px 3px;

border-radius: 3px;

}

input[type=checkbox]:checked:after {

content: "✓";

font-size: 12px;

}

input[type=radio] {

margin-right: 5px;

cursor: pointer;

font-size: 14px;

width: 15px;

height: 12px;

position: relative;

}

input[type=radio]:after {

position: absolute;

width: 10px;

height: 15px;

top: 0;

content: " ";

background-color: #ff0000;

color: #fff;

display: inline-block;

visibility: visible;

padding: 0px 3px;

border-radius: 50%;

}

input[type=radio]:checked:before {

content: "✓";

display: block;

position: relative;

top: -2px;

left: 3px;

width: 6px;

height: 6px;

color: #fff;

font-weight: 400;

z-index: 1;

}

HTML 示例:plus

minus

plus

minus

以上就是对如何利用纯CSS改变html?radio/checkbox默认背景颜色样式的全部介绍,如果您想了解更多有关CSS3视频教程,请关注PHP中文网。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。