失眠网 > css3修改input[type=radio]样式

css3修改input[type=radio]样式

时间：2022-01-25 23:58:06

在项目中经常，需要使用单选按钮input[type=radio]，但是浏览器的默认样式可能与我们需要实现的样式差距很大，可以使用css3来实现想要达到的效果：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>div {position: relative;line-height: 30px;}input[type="radio"] {width: 20px;height: 20px;opacity: 0;}label {position: absolute;left: 5px;top: 3px;width: 20px;height: 20px;border-radius: 50%;border: 1px solid #999;}/*设置选中的input的样式*//* + 是兄弟选择器,获取选中后的label元素*/input:checked+label {background-color: #349EDF;border: 1px solid #349EDF;}input:checked+label::after {position: absolute;content: "";width: 5px;height: 10px;top: 3px;left: 6px;border: 2px solid #fff;border-top: none;border-left: none;transform: rotate(45deg)}</style></head><body><div><input id="item1" type="radio" name="item" value="item1" checked><label for="item1"></label><span>选项一</span></div><div><input id="item2" type="radio" name="item" value="item2"><label for="item2"></label><span>选项二</span></div></body></html>

实际效果如图：

如果觉得《css3修改input[type=radio]样式》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。