淘先锋技术网

首页 1 2 3 4 5 6 7

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样式,并且使之被选中。