欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何將html的radio單選框自定義樣式為正方形和對號

  發(fā)布時(shí)間：2023-12-14 16:50:23   作者：_小鄭有點(diǎn)困了   我要評論
如何能把html的<input type="radio" name="option">改成自定義的樣式呢？比如想要把他變成正方形，選中的時(shí)候是對號,默認(rèn)的樣式太丑了，今天給大家分享如何將html的radio單選框自定義樣式為正方形和對號，感興趣的朋友一起看看吧

將html的radio單選框自定義樣式為正方形和對號

背景：

如何能把html的<input type="radio" name="option">改成自定義的樣式呢？比如想要把他變成正方形，選中的時(shí)候是對號。默認(rèn)的樣式太丑了

默認(rèn)樣式：

在這里插入圖片描述

自定義樣式：

在這里插入圖片描述

實(shí)現(xiàn)代碼

<!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>

到此這篇關(guān)于如何將html的radio單選框自定義樣式為正方形和對號的文章就介紹到這了,更多相關(guān)html radio單選框自定義樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論