CODEWITHSUNDEEP
htmlcss
Cataneo
Cataneo

Reputation: 155

Bootstrap Radio button size on firefox

I can't figure out why radio buttons are smaller on firefox vs. other browsers. I'm using bootstrap in my project. Here's the 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>

And the 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; }

Everything looks fine on Chrome and IE, but Firefox seems to hold the radio buttons sizes limited to 13x13 pixels, no matter how large the width and height in the input is.

Upvotes: 2

Views: 3201

Answers (1)

Tu DUONG
Tu DUONG

Reputation: 94

it's a little bit difference for Firefox. You need to add -moz-appearance: none; to your css to make it work:

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

I made an example here: https://jsfiddle.net/mickey_dt/5762q39m/2/

Hope this help.

Upvotes: 3

Related Questions