大家好，又见面了，我是你们的朋友全栈君。
元素的初始样式都不怎么好看，我们一般修改样式会想到直接在那元素上添加样式，比如background、border等，在大多数元素上是可以这么做，但当遇上了单选框会毫无反应。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style无法直接修改单选框样式</title>
<style> .radio{
width: 100px; height: 100px; background-color: red; } </style>
</head>
<body>
<input type="radio" class="radio"/>
</body>
</html>
怎么解决呢？
使用label进行伪元素（或一些标签，比如i，em，span等）和input绑定，隐藏单选框，显示伪元素，且使用css选择器:checked进行点击后伪元素（或绑定标签）内容（或样式）的修改。
以下例子只是修改伪元素的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改单选框样式</title>
<style> /*.radio{*/ /*width: 100px;*/ /*height: 100px;*/ /*background-color: red;*/ /*}*/ .radio {
display: none; } /* +代表相邻的元素 */ .radio + i {
font-style: normal; text-align: center; font-size: 16px; } /* ::after伪元素，使用伪元素，必须含有content属性，可以为'',但不可不写 */ .radio + i::after {
content: '☆'; } /* 点击后伪元素内容变化 */ .radio:checked + i::after {
content: '★'; } </style>
</head>
<body>
<label>
<input type="radio" class="radio" name="aa" id="aa"/>
<i></i>
aa
</label>
<label>
<input type="radio" class="radio" name="aa" id="bb"/>
<i></i>
bb
</label>
</body>
</html>
完成后的结果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/141656.html原文链接：https://javaforall.net
