将html的radio单选框自定义样式为正方形和对号

将html的radio单选框自定义样式为正方形和对号

背景:

如何能把html的<input type="radio" name="option">改成自定义的样式呢?比如想要把他变成正方形,选中的时候是对号。默认的样式太丑了

默认样式:

自定义样式:

实现代码
bash 复制代码
<!DOCTYPE html>
<html>
<head>
<style>
input[type="radio"] {  
  display: none; 
}  
  

.square-radio {  
    display: flex;
  position: relative;  
  width: 20px;  
  height: 20px;  
  border: 2px solid #333; 
  cursor: pointer; 
}  
  
 
.square-radio::after {  
  content: "✓";  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);   
  font-size: 14px;  
  color: #333;  
  display: none;
}  
   
  
input[type="radio"]:checked + .square-radio::after {  
  color: #2196F3;  
  display: block;
}
</style>
</head>
<body>



<div class="box">
    性别:
    <label>  
        男
        <input type="radio" name="option">  
        <span class="square-radio"></span>  
    </label>
    <label>  
        女
        <input type="radio" name="option">  
        <span class="square-radio"></span>  
    </label>
</div>
</body>
</html>
相关推荐
知远同学几秒前
关闭Chrome提示更新失败的弹窗
前端·chrome
Heidi__1 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
LinXunFeng1 小时前
Flutter - Xcode16 还原编译速度
前端·flutter·xcode
夏之小星星1 小时前
element-ui自制树形穿梭框
前端·javascript·ui·elementui·vue
zhangivon2 小时前
如何设计灵活可扩展的前端日志解决方案:提升应用稳定性与可观测性
前端
ElasticPDF-新国产PDF编辑器2 小时前
HTML && jQuery 项目 PDF 批注插件库在线版 API 示例教程
pdf·html·jquery
程序员黄同学2 小时前
解释观察者模式,如何实现观察者模式?
前端·算法·观察者模式
观无3 小时前
JWT认证服务
前端·c#·vue
匹马夕阳3 小时前
(一)前端程序员转安卓开发分析和规划建议
android·前端
Monly213 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js