/*样式选择器*/ input[type="radio"] { width: 20px; height: 20px; background-color: #eee; border-radius: 50%; outline: none; border: none; cursor: pointer; } input[type="radio"]:checked { background-color: #4CAF50; }
代码中的input[type=”radio”]表示选择所有的单选按钮,给其设置圆形、背景颜色、无边框等样式。而input[type=”radio”]:checked则是表示单选按钮被选中时的状态,设置背景颜色为 #4CAF50,表示选中的效果。
通过CSS3的 radio选中,大家可以轻松定制单选按钮的样式,达到更好的视觉效果,增强用户体验。同时,在前端开发中,也有很多使用radio选中的场景,例如评分、性别选择等。