firefoxbootstrap-4radio-button

Firefox 136 Changed Radio Button Appearance in ruby on rails app with Bootstrap 4 – How to Restore Previous Style?

In my Ruby on Rails app (Ruby 2.6.6p146, Rails 6.1.3.1, Bootstrap 4.6.0), I have radio buttons that were consistently displayed in a fixed style across all versions. Until Firefox version 135.0.1, the selected radio button had a solid inner circle and a solid thick outer ring. However, after updating to Firefox 136, the appearance changed. Now, instead of the usual style, the selected radio button only has a thin outer ring with no solid inner circle. Is there an explanation for this change? How can I restore the previous appearance of the radio buttons in Firefox 136?

<div class="container mt-4">
    <div class="d-flex w-50 for-current-reader flex-row">
        <div class="d-flex flex-column w-50 border p-1 table-info">
            <fieldset class="form-group mb-0 radio_buttons optional parm_01_01_01">
                <legend class="col-form-label p-0"></legend>
                <input type="hidden" name="parm_01_01_01" value="">
                <div class="form-check">
                    <input class="form-check-input" id="parm_01_01_01_1" type="radio" value="1" name="parm_01_01_01">
                    <label class="form-check-label d-block" for="parm_01_01_01_1">Yes</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" id="parm_01_01_01_2" type="radio" value="2" name="parm_01_01_01">
                    <label class="form-check-label d-block" for="parm_01_01_01_2">No</label>
                </div>
            </fieldset>
        </div>
    </div>
</div>

radio button appearance change after firefox update

Solution

  • The change in Firefox 136 is a User Experience choice made by Mozilla. As of 10 March 2025, Mozilla is doubling down on the change.

    The (simplified) CSS/HTML below should reasonably replicate Firefox's former appearance in Windows. It would also make browsers in every platform look like Windows. I haven't attempted to adjust for any themes the user might have applied.

    You can tweak it to make sure it's uniform for other browsers/platforms (e.g., Chrome) as needed. It works perfectly for me in Firefox 136 on Windows.

    appearance: none turns off most browser styling. box-shadow in ::before is the dot for the checked radio button.

    body {
  background-color: #bfe5eb;
}

input[ type="radio" ] {
  appearance: none;
  background-color: #fff;
  border: 2px solid #8f8f9d;
  border-radius: 50%;
  margin-bottom: -1px;
  height: 14px;
  width: 14px;
}

input[ type="radio" ]:checked {
  border-color: #1062dc;
  place-content: center;
}

input[ type="radio" ]:checked::before {
  border-radius: 50%;
  box-shadow: 6px 6px inset #1062dc;
  content: "";
  display: grid;
  height: 6px;
  width: 6px;
  position: relative;
  left: 2px;
}
    <!DOCTYPE html><html lang="en"><head>
  <title>Stack Overflow Q&amp;A</title>
</head><body>
  <table><tbody>
    <tr>
      <td><label><input type="radio" name="answer" checked>Yes</label></td>
    </tr><tr>
      <td><label><input type="radio" name="answer">No</label></td>
    </tr><tr>
      <td><label><input type="radio" name="answer">Maybe</label></td>
    </tr>
  </tbody></table>
</body></html>