Checkboxes value not visible in mozilla Firefox

Issue

I have these two checkboxes

    <input type="checkbox" id="OP" name="calendario" value="Ore Personali" checked>
    <input type="checkbox" id="assenze" name="calendario" value="Assenze">

This is how i see them in Chrome:

And this is in mozilla:

I read that there is this bug where the values in mozilla are not visible, but online i didnt find a solution. Can someone help me pls?

I tried add a label but it overlaps with the value and i cannot remove the values cause they are connected to a function in javascript

---

i appreciate your answer @lupz But as i already tried before and as you suggest, for mozilla the problem is resolved but this is the result in chrome

---

This is the only function in JS where these 2 checkboxes are mention:

$("input[name=calendario]:checked").each(function() {
  selections.push($(this).val());
});
var showEvent = false;
if (selections.indexOf("Ore Personali") >= 0 && event.nomeUtente == $("#nomeUtente").data('value')) showEvent = true;
if (selections.indexOf("Assenze") >= 0 && event.nomeUtente != $("#nomeUtente").data('value')) showEvent = true;

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="list-group has-actions">
  <div class="list-group-item" data-plugin="editlist">
    <div class="list-content">
      <input type="checkbox" id="OP" name="calendario" value="Ore Personali" checked>
      <label for="OP">Ore Personali</label>
    </div>
  </div>
  <div class="list-group-item" data-plugin="editlist">
    <div class="list-content">
      <input type="checkbox" id="assenze" name="calendario" value="Assenze">
    </div>
  </div>
</div>

---

found the solution:

i had in my css:

[type=checkbox]:after {
content: attr(value) !important; }

I just had to remove it. Didnt know it was there cause it's a template the code i'm using

Solution

There is a special label tag that you can (and should) use to display actual labels for form elements. I think there is some additional "magic" going on in your project that shows those checkbox values directly. At least at my end, chrome and FF both don't show the checkbox values.

<div>
  <input type="checkbox" id="OP" name="calendario" value="Ore Personali" checked>
  <label for="OP">Ore Personali</label>
</div>

<div>
  <input type="checkbox" id="assenze" name="calendario" value="Assenze">
  <label for="assenze">Assenze</label>
</div>

Check out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox for the details.

Answered By - lupz