How to change the style of checkboxes ?

Question

when clicking on one of the list , inactive change the style ? When you click the checkbox, the sf-option-active class is issued. How can css be changed by others ?

 

Initially, all the elements are highlighted, when you click on one checkbox others are dimmed

 

<ul data-operator="or" class="list">

<li class="sf-level-0 sf-item-29" data-sf-count="19" data-sf-depth="0">

<input class="sf-input-checkbox" type="checkbox" value="tehobor" name="_sft_tip[]" id="sf-input-fc6224670cc95e4fdecf6cc456d08c36">

<label class="sf-label-checkbox" for="sf-input-fc6224670cc95e4fdecf6cc456d08c36">Name1</label></li>

<li class="sf-level-0 sf-item-30 sf-option-active" data-sf-count="6" data-sf-depth="0">

<input class="sf-input-checkbox" type="checkbox" value="konveiri" name="_sft_tip[]" checked="checked" id="sf-input-868176859db7cbdd316babead1c4a6ca">

<label class="sf-label-checkbox" for="sf-input-868176859db7cbdd316babead1c4a6ca">Name2</label></li>

<li class="sf-level-0 sf-item-31" data-sf-count="8" data-sf-depth="0">

<input class="sf-input-checkbox" type="checkbox" value="prolinii" name="_sft_tip[]" id="sf-input-080920625a50faa6f70e10891e88ebaa">

<label class="sf-label-checkbox" for="sf-input-080920625a50faa6f70e10891e88ebaa">Name3</label></li>

<li class="sf-level-0 sf-item-32" data-sf-count="4" data-sf-depth="0">

<input class="sf-input-checkbox" type="checkbox" value="neitrobor" name="_sft_tip[]" id="sf-input-df092a05d0048b1297780b8683077cb1">

<label class="sf-label-checkbox" for="sf-input-df092a05d0048b1297780b8683077cb1">Name4</label></li>

</ul>