CSS单选框是网页中常见的一种控件,可以用于用户选择一项选项。在CSS中,单选框方框的样式可以通过以下属性进行设置。
input[type=radio] { appearance: none; border: 2px solid #555; border-radius: 50%; width: 20px; height: 20px; outline: none; cursor: pointer; } input[type=radio]:checked { background-color: #555; }
在上述代码中,首先我们使用了 appearance: none;
属性来移除浏览器默认的样式。接下来,我们设置了单选框方框的边框样式、宽度和高度,并添加了圆角。设置 outline: none;
属性来移除聚焦效果,让单选框外观更加美观。
当单选框被选中时,我们使用 :checked
伪类来改变背景色。可以根据不同需求,在 :checked
样式下设置不同的背景色。
通过上述方式,我们可以轻松地为网页添加美观的单选框方框,提升用户体验。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。