Checkbox színének megváltoztatása

Checkbox színének megváltoztatása
2021-09-17T12:17:12+02:00
2021-09-19T12:23:01+02:00
2022-10-15T21:25:50+02:00
thetester
Hello

Szeretném, hogy csak a hirlevelkuldo div-ben található form esetén legyen a checkbox négyzet színe a fekete helyett piros. Az összes többi, ami szintén ezen az oldalon van, de nincs a hirlevelkuldo div ben található checkbox maradjon fekete. (CSS-el)

.. <div class="hirlevelkuldo"> <p class="form_1" style="text-align:center;"><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required fill_inited" aria-required="true" aria-invalid="false" placeholder="Név"></span><span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email fill_inited" aria-required="true" aria-invalid="false" placeholder="E-mail cím"></span><span class="wpcf7-form-control-wrap acceptance-525"><span class="wpcf7-form-control wpcf7-acceptance"><span class="wpcf7-list-item"><label><input type="checkbox" name="acceptance-525" value="1" aria-invalid="false"><span class="wpcf7-list-item-label">Elfogadom az <a href="/adatvedelem">adatvédelmi feltételek</a>et.</span></label></span></span></span> </p><div style="display: table; margin: 0 auto;"><input type="submit" value="Feliratkozok" class="wpcf7-form-control wpcf7-submit" disabled=""><span class="ajax-loader"></span></div> <p></p> </div>
..

Köszönöm,
TT
Mutasd a teljes hozzászólást!
a firefox miatt akkor csak az működik, ha a teljes eredeti checkboxot elrejtjük és átírjuk a megjelenést:

.hirlevelkuldo input[type="checkbox"] { border-color: red; } input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid black; display: inline-flex; top: 5px; position: relative; } input[type="checkbox"]::before { width: 100%; height: 100%; position: absolute; content: ""; top: -3px; } input[type="checkbox"]:checked::before { content: "\2714"; }
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd