Насколько я знаю, перезаписать флажок по умолчанию в браузере и переключатель невозможно, для достижения того, что вы ищете, вы должны применить display: none; к стандартным кнопкам переключателей и флажков и сделать их самостоятельно.
Для этой цели вы можете проверить следующие руководства:
РЕДАКТИРОВАТЬ: вот простой, но не очень скудный и аккуратный пример ниже:
/* hide the regular checkbox */
.pd-checkbox input {
opacity: 0;
position: absolute;
}
/* position the label */
.pd-checkbox input,
.pd-checkbox label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pd-checkbox label {
position: relative;
}
/* style the unchecked checkbox */
.pd-checkbox input+label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
margin-right: 10px;
text-align: center;
font-size: 17px;
line-height: 15px;
}
/* style the checked checkbox */
.pd-checkbox input:checked+label:before {
content: "\f00c";
font-family: 'FontAwesome';
background: #e9f0fb;
color: #035fb7;
border-color: #9cb1c4;
}
/* hide the regular radio button */
.pd-radio input {
opacity: 0;
position: absolute;
}
/* position the label */
.pd-radio input,
.pd-radio label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pd-radio label {
position: relative;
}
/* style the unchecked radio button */
.pd-radio input+label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
line-height: 15px;
margin-right: 10px;
text-align: center;
}
.pd-radio input+label:before {
border-radius: 50%;
}
/* style the selected radio button */
.pd-radio input:checked+label:before {
content: "\f111";
font-family: 'FontAwesome';
background: #e9f0fb;
color: #035fb7;
border-color: #035fb7;
}
<!-- Load the Font Awesome Library via CDN -->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
<p class="form-field checkbox1 pd-checkbox required no-label">
<input id="checkbox1" name="checkbox1" onchange="" type="checkbox" value="">
<label class="inline" for="checkbox1">Checkbox</label>
</p>
<p class="form-field radio1 pd-radio required no-label ">
<span class="value">
<span class="" style="">
<input type="radio" name="radioButton" id="radioButton" value="" onchange="">
<label class="inline" for="radioButton">Radiobutton</label>
</span>
</span>
</p>
ПРИМЕЧАНИЕ: Я просто использовал CSS выше для дополнительной иллюстрации и фрагментов кода.
И вот мы получили SCSSкоды:
$color_1: #035fb7;
$font_family_1: 'FontAwesome';
$border_color_1: #9cb1c4;
$border_color_2: #035fb7;
.pd-checkbox {
input {
opacity: 0;
position: absolute;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
&:checked&+label {
&:before {
content: "\f00c";
font-family: $font_family_1;
background: #e9f0fb;
color: $color_1;
border-color: $border_color_1;
}
}
}
label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
input&+label {
&:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
margin-right: 10px;
text-align: center;
font-size: 17px;
line-height: 15px;
}
}
}
.pd-radio {
input {
opacity: 0;
position: absolute;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
&:checked&+label {
&:before {
content: "\f111";
font-family: $font_family_1;
background: #e9f0fb;
color: $color_1;
border-color: $border_color_2;
}
}
}
label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
input&+label {
&:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
line-height: 15px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
}
}
}