将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>
相关推荐
字节架构前端39 分钟前
k8s场景下的指标监控体系构建——Prometheus 简介
前端·架构
奕羽晨1 小时前
关于CSS的一些读书笔记
前端·css
Poetry2371 小时前
大屏数据可视化适配方案
前端
遂心_1 小时前
用React Hooks + Stylus打造文艺范的Todo应用
前端·javascript·react.js
轻语呢喃1 小时前
<a href=‘ ./XXX ’>,<a href="#XXX">,<Link to="/XXX">本质与区别
前端·react.js·html
用户3802258598241 小时前
vue3源码解析:watch的实现
前端·vue.js·源码
F2E_Zhangmo1 小时前
第一章 uniapp实现兼容多端的树状族谱关系图,创建可缩放移动区域
前端·javascript·uni-app
鹏程十八少1 小时前
3. Android 第三方框架 Okhttp, Retrofit 的动态代理和适配器模式深度解读三
前端
阿怼丶1 小时前
🚶‍♂️基于 Three.js 的自定义角色漫游系统实战:支持碰撞检测与动画控制
前端·three.js