CSS可以帮助我们控制网站元素的样式,其中一种元素就是radio单选框。下面是如何使用CSS给radio添加样式并且使之被选中的方法:
/* 定义radio样式 */ input[type="radio"] { /* 去掉默认的外观 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* 定义背景颜色和边框样式 */ border: 2px solid #ccc; border-radius: 50%; width: 20px; height: 20px; display: inline-block; position: relative; top: 5px; margin-right: 10px; } /* 定义被选中的radio样式 */ input[type="radio"]:checked:before { content: ''; display: block; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background-color: #00baff; }
解释一下上面的代码:
首先,我们定义了radio的样式。我们把默认的外观去掉,并定义了背景颜色和边框样式。我们设置了一个圆形的形状,并调整了大小和位置。
接着,我们定义了被选中的radio的样式。我们使用:before伪类来添加一个圆形的背景,并调整了大小和位置。我们设置了background-color为#00baff,这样就可以看到选中的radio的背景颜色变成了蓝色。
使用以上代码,我们就可以自定义我们网站的radio样式,并且使之被选中。