0

I'm trying to make a custom checkbox in css but it doesn't seem to work properly.

My code

#checkbox1:checked + .checkboxOption::after {
    display: block;
    content:"";
    position: absolute;
    display: none;
    height: 10px;
    width: 10px;
    border: white;
    z-index: 2;
    color: white;
}

.checkboxOption {
    position: absolute;
    margin: 0 10px;
    height: 25px;
    width: 25px;
    background-color: #3B444B;
}
<div class="checkTitleText">
    <input type="checkbox" checked="checked" id="checkbox1">
    <label class="checkboxOption" for="checkbox1"><label></label></label>
    <label class="checkboxTitle" for="checkbox1">Fight Park</label>
    <div>
        <span class="priceCheckbox">Price</span>
    </div>
</div>

The original input is display:none so I'm trying to make the label .checkboxOption shown here instead

I think that it is somehow working but I don't see the result on my page. Is there a way I can test css as I would do with js ?

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Bizu
  • 17
  • 6
  • 1
    Does this answer your question? [How to style a checkbox using CSS](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) – MattHamer5 Sep 23 '22 at 09:04
  • I already have checked that link, but I've changed my code since I tried this method. I now use a verification to check if the checkbox input is checked, cause it seems more logical for me to do so. – Bizu Sep 23 '22 at 09:08
  • Your code does not match your text description. ‘The original input is display none’ is not so in your snippet. Do you just want the text of the labels to be on top of an otherwise invisible checkbox? – A Haworth Sep 23 '22 at 10:17
  • yes, I want the label to be stylized as a checkbox, with the real checkbox hidden. @AHaworth – Bizu Sep 23 '22 at 10:46

0 Answers0