html - 如何使我的单选按钮具有方形格式
问题描述
我需要我的单选按钮具有方形格式,保持每个单选按钮的背景颜色。
我尝试的是添加“.custom-radios input [type =” radio“] + label span”:
-webkit-外观:复选框;
-moz-外观:复选框;
-ms-外观:复选框;
但这会带走背景颜色。
.custom-radios div {
display: inline-block;
}
.custom-radios input[type="radio"] {
display: none;
}
.custom-radios input[type="radio"] + label {
color: #333;
font-family: Arial, sans-serif;
font-size: 14px;
}
.custom-radios input[type="radio"] + label span {
display: inline-block;
width: 25px;
height: 25px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
background-repeat: no-repeat;
background-position: center;
text-align: center;
line-height: 25px;
}
.custom-radios input[type="radio"] + label span img {
opacity: 0;
transition: all 0.3s ease;
}
.custom-radios input[type="radio"]#color-3 + label span {
background-color: #f1c40f;
}
.custom-radios input[type="radio"]#color-4 + label span {
background-color: #e74c3c;
}
.custom-radios input[type="radio"]:checked + label span img {
opacity: 1;
}
<div class="custom-radios">
<div>
<input type="radio" id="color-3" name="color" value="color-3">
<label for="color-3">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="color-4" name="color" value="color-4">
<label for="color-4">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
</div>
解决方案
移除边框半径:50%;
.custom-radios div {
display: inline-block;
}
.custom-radios input[type="radio"] {
display: none;
}
.custom-radios input[type="radio"] + label {
color: #333;
font-family: Arial, sans-serif;
font-size: 14px;
}
.custom-radios input[type="radio"] + label span {
display: inline-block;
width: 25px;
height: 25px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
/*border-radius: 50%;*/
border: 2px solid #fff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
background-repeat: no-repeat;
background-position: center;
text-align: center;
line-height: 25px;
}
.custom-radios input[type="radio"] + label span img {
opacity: 0;
transition: all 0.3s ease;
}
.custom-radios input[type="radio"]#color-3 + label span {
background-color: #f1c40f;
}
.custom-radios input[type="radio"]#color-4 + label span {
background-color: #e74c3c;
}
.custom-radios input[type="radio"]:checked + label span img {
opacity: 1;
}
<div class="custom-radios">
<div>
<input type="radio" id="color-3" name="color" value="color-3">
<label for="color-3">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="color-4" name="color" value="color-4">
<label for="color-4">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
</div>
推荐阅读
- sql - 尝试将 SQL 开发人员与 Oracle 数据库连接时出现 ORA-12705 错误
- jenkins - 如何由特定用户运行 Jenkins 作业
- python - 如何为 pyarrow Table 列设置“类别”数据类型?
- swift - 无法通过直播中新创建的频道进行流式传输
- python - 如何按行值将一个 DataFrame 拆分为多个 DataFrame?
- ffmpeg - 没有这样的文件或目录 discord.py
- kubernetes - Nginx Ingress 路径重定向到 azure K8 中的多个服务
- reactjs - React 和 React Hooks:在子组件中使用 onClick 函数来触发父包装组件的函数
- python - 从 csv 中删除不需要的行时出现 IndexError
- laravel - Storybook.js 正在破坏通过 webpack 加载的字体