gpt4 book ai didi

html - Firefox 上的 Bootstrap 单选按钮大小

转载 作者:太空宇宙 更新时间:2023-11-04 16:08:09 25 4
gpt4 key购买 nike

我不明白为什么 firefox 上的单选按钮比其他浏览器小。我在我的元素中使用 Bootstrap 。这是 HTML:

<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<title>Example - pure CSS</title>
<link rel="stylesheet" href="css2.css">
</head>
<body>
<div id="5159" aria-labelledby="5158" checked="false">
<div class="radio">
<label>
<input id="51590" name="5159" onchange="sendInput('5159', this.value)" data-modalfocus="" checked="" value="Yes" type="radio" style="margin-top: 1px;">
Yes
</label>
</div>
<div class="radio">
<label>
<input id="51591" name="5159" onchange="sendInput('5159', this.value)" data-modalfocus="" value="No" type="radio" style="margin-top: 1px;">
No
</label>
</div>
</div>
</body>
</html>

还有 CSS:

.radio {
/*margin: 8px 0px 10px 0px; */}

.radio + .radio {
margin-top: 0px; }

.radio label {
line-height: 16px;
min-height: 16px;
color: #222222;
font-size: 14px;
margin-left: 4px; }

.radio input[type='radio'] {
-webkit-appearance: none;
width: 26px;
height: 26px;
border: none;
border-radius: 50%;
outline: none;
box-shadow: 0 0 1px 0px #999999 inset;
}
.radio input[type='radio']:hover {
box-shadow: 0 0 1px 0px #999999 inset; }
.radio input[type='radio']:before {
content: '';
display: block;
width: 40%;
height: 40%;
margin: 30% auto;
border-radius: 50%; }
.radio input[type='radio']:checked:before {
background: #666666; }
.radio input[type='radio']:focus {
border: 1px solid #4276f2 !important; }
.radio input[type='radio']:disabled {
box-shadow: 0 0 1px 0px #CCCCCC inset;
background: #CCCCCC;
color: #999999; }

在 Chrome 和 IE 上一切看起来都很好,但 Firefox 似乎将单选按钮的大小限制在 13x13 像素,无论输入中的宽度和高度有多大。

最佳答案

Firefox 略有不同。您需要添加 -moz-appearance: none;到您的 CSS 以使其工作:

input {
z-index: 3;
width: 26px;
height: 26px;-moz-appearance: none;}

我在这里做了一个例子:https://jsfiddle.net/mickey_dt/5762q39m/2/

希望这对您有所帮助。

关于html - Firefox 上的 Bootstrap 单选按钮大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36359736/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com