将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>
相关推荐
rising start11 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied20 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖21 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A25 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER27 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父31 分钟前
前端速通—CSS篇
前端·css
pixle034 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf198740 分钟前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH40 分钟前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童1 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源