ブートストラップfirefoxのラジオボタンのサイズ

Firefoxが他のブラウザと比べてラジオボタンが小さい理由はわかりません。私は自分のプロジェクトでブートストラップを使用しています。ブートストラップfirefoxのラジオボタンのサイズ

<!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：は、ここにHTMLだ

.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ピクセルに制限されたサイズのラジオボタンを保持していないように見えます入力の幅と高さはです。

出典

2016-04-01 Cataneo

Firefoxでは少し違いがあります。 -moz-appearance：none;を追加する必要があります。それを動作させるためにあなたのCSSに：

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

私はここで例を作った：https://jsfiddle.net/mickey_dt/5762q39m/2/

は、このヘルプを願っています。

出典

2016-04-01 15:25:08

このタグの使用には、Mozillaの恐ろしい警告が含まれています。 https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance –

ブートストラップfirefoxのラジオボタンのサイズ

答えて

関連する問題