Modify the style of a Checkbox by class [CSS]

Question

I found in some blog a while ago a style for checkbox. It is an ethyl that was very satisfactory for some projects that I have done however, it modifies/stylizes all the checkboxes of the page.

I need help modifying this style so that it is applied only when it is called in the "class" of a div or form. This way the other checkboxes will be with the default style of each browser.

Follows the style mentioned:

input[type=checkbox] + label {
display: block;
margin: 0em;
cursor: pointer;
padding: 0.1em;
}

input[type=checkbox] {
display: none;
}

input[type=checkbox] + label:before {
content: "\2714";
border: 0.13em solid #000;
border-radius: 0.0em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .6s;
}

input[type=checkbox] + label:active:before {
transform: scale(0);
}

input[type=checkbox]:checked + label:before {
background-color: #00ff00;
border-color: #00000;
color: #000000;
}

input[type=checkbox]:disabled + label:before {
transform: scale(1);
border-color: #aaa;
}

input[type=checkbox]:checked:disabled + label:before {
transform: scale(1);
background-color: #bfb;
border-color: #bfb;
}

<form name="form_001">

<input type="checkbox" name="Opção 01" id="Opção 01" value="01" "><label for="Opção 01"> Opção 01</label>

<input type="checkbox" name="Opção 02" id="Opção 02" value="02" "><label for="Opção 02"> Opção 02</label>

</form>

Grateful from now on.

Answer 1

Just replace the generic selector input[type=checkbox] by a class and place this class in the checkboxes you want to style. Those that don’t have the class will be in the default browser style:

.boxestilizado + label {
display: block;
margin: 0em;
cursor: pointer;
padding: 0.1em;
}

.boxestilizado {
display: none;
}

.boxestilizado + label:before {
content: "\2714";
border: 0.13em solid #000;
border-radius: 0.0em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .6s;
}

.boxestilizado + label:active:before {
transform: scale(0);
}

.boxestilizado:checked + label:before {
background-color: #00ff00;
border-color: #00000;
color: #000000;
}

.boxestilizado:disabled + label:before {
transform: scale(1);
border-color: #aaa;
}

.boxestilizado:checked:disabled + label:before {
transform: scale(1);
background-color: #bfb;
border-color: #bfb;
}

<form name="form_001">

<input class="boxestilizado" type="checkbox" name="Opção 01" id="Opção 01" value="01"><label for="Opção 01"> Opção 01</label>
<br>
<input type="checkbox" name="Opção 02" id="Opção 02" value="02"><label for="Opção 02"> Opção 02</label>

</form>