一个radio选项卡美化的css代码示例 发布时间:2023/10/11 css radio 选项卡 样式美化 <p>您的性别:</p> <div class="radio-sex"> <input type="radio" id="sex1" name="sex"> <label for="sex1"></label> <span>男</span> </div> <div class="radio-sex"> <input type="radio" id="sex2" name="sex"> <label for="sex2"></label> 女 </div> <style> .radio-sex { position: relative; display: inline-block; margin-right: 12px; } .radio-sex input { vertical-align: middle; margin-top: -2px; margin-bottom: 1px; /* 前面三行代码是为了让radio单选按钮与文字对齐 */ width: 20px; height: 20px; appearance: none;/*清楚默认样式*/ -webkit-appearance: none; opacity: 0; outline: none; /* 注意不能设置为display:none*/ } .radio-sex label { position: absolute; left: 0; top: 0; z-index: -1; /*注意层级关系,如果不把label层级设为最低,会遮挡住input而不能单选*/ width: 20px; height: 20px; border: 1px solid #3582E9; border-radius: 100%; } .radio-sex input:checked+label { background: #3582E9; } .radio-sex input:checked+label::after { content: ""; position: absolute; left: 8px; top: 2px; width: 5px; height: 12px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); } </style>复制代码