网页制作 > HTML/Xhtml >
如何将html的radio单选框自定义样式为正方形和对号
_小郑有点困了
将html的radio单选框自定义样式为正方形和对号
背景:
如何能把html的
<input type="radio" name="option">
改成自定义的样式呢?比如想要把他变成正方形,选中的时候是对号。默认的样式太丑了
默认样式:
自定义样式:
实现代码
<!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>
到此这篇关于如何将html的radio单选框自定义样式为正方形和对号的文章就介绍到这了,更多相关html radio单选框自定义样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!