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>

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>

• firefox
• bootstrap-4
• radio-button

• 1 Mozilla provides you with examples on styling radio buttons: developer.mozilla./en-US/docs/Web/HTML/Element/input/radio as for the default that is up to the browser implementation for the input type. – engineersmnky Commented Mar 10 at 21:01
• Sorry, I'm new to software development. Could you provide more details? Has Firefox changed the default appearance of radio buttons? If so, should I override this change, and how can I do that? Thanks in advance! – moh19814 Commented Mar 10 at 21:46
• Thank you for the clarification. Should I update my Firefox version to roll back those changes. I cannot find any new available Firefox version – moh19814 Commented Mar 11 at 8:02
• 1 I would recommend reading this section developer.mozilla./en-US/docs/Web/HTML/Element/input/… it explains how you can apply your own styling for the radio buttons. With some trial and error I am confident you can figure out how to use css to obtain your desired styling. You not upgrading Firefox or downgrading is not only a bad idea it will have no bearing on how your site appears to anyone else. If you want consistent styling you can apply it yourself through CSS – engineersmnky Commented Mar 12 at 0:34

1 Answer 1

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>