Question

我无法弄清楚为什么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像素。

Answer 1

这对Firefox来说有点不同。你需要添加-moz-appearance：none;你的css让它工作：

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

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

希望得到这个帮助。

firefox上的Bootstrap单选按钮大小

1 个答案: