在复选框的外边框和内边框之间添加间隙
Add gap between outer and inner border of checkbox
我正在设计一堆表单元素的样式，需要自定义复选框的样式。选中时需要如下所示：
我能得到的最接近的是你在这里看到的：https://jsfiddle.net/ufhav6Lw/2/
.gform_wrapper.gravity-theme .gfield input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + *::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 18px;
height: 18px;
margin-right: 0.3rem;
border-radius: 10%;
border-style: solid;
border-width: 2px;
border-color: #c3cbd6;
flex-shrink: 0;
}
input[type="checkbox"]:checked {
color: #008ed4;
}
input[type="checkbox"]:checked + *::before {
content: "";
color: white;
text-align: center;
background: #008ed4;
background-size:50%;
border-color: #008ed4;
}
<div class="gf_browser_chrome gform_wrapper gravity-theme" id="gform_wrapper_4"><div id="gf_4" class="gform_anchor" tabindex="-1"></div>
<div class="gform_heading">
<h2 class="gform_title">Forms Kitchen Sink</h2>
<span class="gform_description">A demo page for the forms styling</span>
</div><form method="post" enctype="multipart/form-data" target="gform_ajax_frame_4" id="gform_4" action="/forms/#gf_4">
<div class="gform_body gform-body"><div id="gform_fields_4" class="gform_fields top_label form_sublabel_below description_below"><div id="field_4_2" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_2">Focused Field (enter text to test the focus style)</label><div class="ginput_container ginput_container_text"><input name="input_2" id="input_4_2" type="text" value="" class="large" aria-invalid="false" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"> </div></div><div id="field_4_3" class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_3">Field Error (submit empty field to see error styling)<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label><div class="ginput_container ginput_container_text"><input name="input_3" id="input_4_3" type="text" value="" class="large" aria-required="true" aria-invalid="false"> </div></div><div id="field_4_4" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_4">Select (choose an option to see selected/focused styling)</label><div class="ginput_container ginput_container_select"><select name="input_4" id="input_4_4" class="large gfield_select" aria-invalid="false"><option value="Choose an option...">Choose an option...</option><option value="First Choice">First Choice</option><option value="Second Choice">Second Choice</option><option value="Third Choice">Third Choice</option></select></div></div><div id="field_4_5" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_5">Text Area (enter text to see text styling)</label><div class="ginput_container ginput_container_textarea"><textarea name="input_5" id="input_4_5" class="textarea large" placeholder="Placeholder" aria-invalid="false" rows="10" cols="50"></textarea></div></div><div id="field_4_7" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_7">Phone (enter number to see text styling)</label><div class="ginput_container ginput_container_phone"><input name="input_7" id="input_4_7" type="text" value="" class="large" placeholder="(XXX) XXX-XXXX" aria-invalid="false"></div></div><div id="field_4_8" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_8">File</label><div class="ginput_container ginput_container_fileupload"><input type="hidden" name="MAX_FILE_SIZE" value="67108864"><input name="input_8" id="input_4_8" type="file" class="large" aria-describedby="gfield_upload_rules_4_8" onchange="javascript:gformValidateFileSize( this, 67108864 );"><span class="gform_fileupload_rules" id="gfield_upload_rules_4_8">Max. file size: 64 MB.</span><div class="validation_message validation_message--hidden-on-empty" id="live_validation_message_4_8"></div></div></div><fieldset id="field_4_9" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><legend class="gfield_label">Radio</legend><div class="ginput_container ginput_container_radio"><div class="gfield_radio" id="input_4_9">
<div class="gchoice gchoice_4_9_0">
<input class="gfield-choice-input" name="input_9" type="radio" value="Radio Select 1" id="choice_4_9_0" onchange="gformToggleRadioOther( this )">
<label for="choice_4_9_0" id="label_4_9_0">Radio Select 1</label>
</div>
<div class="gchoice gchoice_4_9_1">
<input class="gfield-choice-input" name="input_9" type="radio" value="Radio Select 2 with a second line of text" id="choice_4_9_1" onchange="gformToggleRadioOther( this )">
<label for="choice_4_9_1" id="label_4_9_1">Radio Select 2 with a second line of text</label>
</div>
<div class="gchoice gchoice_4_9_2">
<input class="gfield-choice-input" name="input_9" type="radio" value="Radio Select 3" id="choice_4_9_2" onchange="gformToggleRadioOther( this )">
<label for="choice_4_9_2" id="label_4_9_2">Radio Select 3</label>
</div></div></div></fieldset><fieldset id="field_4_10" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><legend class="gfield_label gfield_label_before_complex">Checkbox</legend><div class="ginput_container ginput_container_checkbox"><div class="gfield_checkbox" id="input_4_10"><div class="gchoice gchoice_4_10_1">
<input class="gfield-choice-input" name="input_10.1" type="checkbox" value="Checkbox Select 1" id="choice_4_10_1">
<label for="choice_4_10_1" id="label_4_10_1">Checkbox Select 1</label>
</div><div class="gchoice gchoice_4_10_2">
<input class="gfield-choice-input" name="input_10.2" type="checkbox" value="Checkbox Select 2 with a second line of text" id="choice_4_10_2">
<label for="choice_4_10_2" id="label_4_10_2">Checkbox Select 2 with a second line of text</label>
</div><div class="gchoice gchoice_4_10_3">
<input class="gfield-choice-input" name="input_10.3" type="checkbox" value="Checkbox Select 3" id="choice_4_10_3">
<label for="choice_4_10_3" id="label_4_10_3">Checkbox Select 3</label>
</div></div></div></fieldset><fieldset id="field_4_11" class="gfield field_sublabel_above field_description_below gfield_visibility_visible"><legend class="gfield_label gfield_label_before_complex">Time</legend><div class="ginput_complex">
<div class="gfield_time_hour ginput_container ginput_container_time" id="input_4_11">
<label class="hour_label" for="input_4_11_1">Hour</label>
<input type="text" maxlength="2" name="input_11[]" id="input_4_11_1" value="00" placeholder="HH" aria-required="false">
</div>
<div class="above hour_minute_colon">:</div>
<div class="gfield_time_minute ginput_container ginput_container_time">
<label class="minute_label" for="input_4_11_2">Minutes</label>
<input type="text" maxlength="2" name="input_11[]" id="input_4_11_2" value="00" placeholder="MM" aria-required="false">
</div>
<div class="gfield_time_ampm ginput_container ginput_container_time above">
<select name="input_11[]" id="input_4_11_3">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</div>
</div></fieldset><div id="field_4_13" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_13">Date</label><div class="ginput_container ginput_container_date">
<input name="input_13" id="input_4_13" type="text" value="" class="datepicker mdy datepicker_with_icon gdatepicker_with_icon hasDatepicker initialized" placeholder="Pick a date." aria-describedby="input_4_13_date_format" aria-invalid="false"><img class="ui-datepicker-trigger" src="https://hamodia-2021.local.zill.as/wp-content/plugins/gravityforms/images/datepicker/datepicker.svg" alt="Select date" title="Select date">
<span id="input_4_13_date_format" class="screen-reader-text">MM slash DD slash YYYY</span>
</div>
<input type="hidden" id="gforms_calendar_icon_input_4_13" class="gform_hidden" value="https://hamodia-2021.local.zill.as/wp-content/plugins/gravityforms/images/datepicker/datepicker.svg"></div></div></div>
<div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_4" class="gform_button button" value="Submit" onclick="if(window["gf_submitting_4"]){return false;} window["gf_submitting_4"]=true; " onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_4"]){return false;} window["gf_submitting_4"]=true; jQuery("#gform_4").trigger("submit",[true]); }"> <input type="hidden" name="gform_ajax" value="form_id=4&title=1&description=1&tabindex=0">
<input type="hidden" class="gform_hidden" name="is_submit_4" value="1">
<input type="hidden" class="gform_hidden" name="gform_submit" value="4">
<input type="hidden" class="gform_hidden" name="gform_unique_id" value="">
<input type="hidden" class="gform_hidden" name="state_4" value="WyJ7XCI5XCI6W1wiNGZmZjdiMzNkNzc5ZmFjZDdlZTJjYWRiZmM0ZGQwNzRcIixcIjkyMzk1MmEyOTVkNzYxZTU5NDJmYWNkNmM4N2JhYzE5XCIsXCI4NDEwODYwZGNjZDEyZjM4MjE2YTQ2N2JhMTBmOWQ0NFwiXX0iLCI1YzRjYTFhNjhmOThhN2QzMGFkMDQxMTkwYzU5Nzg2MSJd">
<input type="hidden" class="gform_hidden" name="gform_target_page_number_4" id="gform_target_page_number_4" value="0">
<input type="hidden" class="gform_hidden" name="gform_source_page_number_4" id="gform_source_page_number_4" value="1">
<input type="hidden" name="gform_field_values" value="">
</div>
</form>
</div>
我尝试在 fiddle 的 CSS 的第 24 行使用 background-size:50%;。
如何在复选框的内外正方形之间创建间隙？
方法有很多种，例如
input[type='checkbox'] {width: 18px; height: 18px; border: 1px solid #ccc; position: relative; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: text-bottom;}
input[type='checkbox']:before {content: ''; position: absolute; top: 2px; left: 2px; background: #ccc; width: 12px; height: 12px;}
input[type='checkbox']:checked {border-color: blue}
input[type='checkbox']:checked:before {background: blue}
<label>
<input type="checkbox">
Checkbox 1
</label>
<label>
<input type="checkbox">
Checkbox 2
</label>
我正在设计一堆表单元素的样式，需要自定义复选框的样式。选中时需要如下所示：
我能得到的最接近的是你在这里看到的：https://jsfiddle.net/ufhav6Lw/2/
.gform_wrapper.gravity-theme .gfield input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + *::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 18px;
height: 18px;
margin-right: 0.3rem;
border-radius: 10%;
border-style: solid;
border-width: 2px;
border-color: #c3cbd6;
flex-shrink: 0;
}
input[type="checkbox"]:checked {
color: #008ed4;
}
input[type="checkbox"]:checked + *::before {
content: "";
color: white;
text-align: center;
background: #008ed4;
background-size:50%;
border-color: #008ed4;
}
<div class="gf_browser_chrome gform_wrapper gravity-theme" id="gform_wrapper_4"><div id="gf_4" class="gform_anchor" tabindex="-1"></div>
<div class="gform_heading">
<h2 class="gform_title">Forms Kitchen Sink</h2>
<span class="gform_description">A demo page for the forms styling</span>
</div><form method="post" enctype="multipart/form-data" target="gform_ajax_frame_4" id="gform_4" action="/forms/#gf_4">
<div class="gform_body gform-body"><div id="gform_fields_4" class="gform_fields top_label form_sublabel_below description_below"><div id="field_4_2" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_2">Focused Field (enter text to test the focus style)</label><div class="ginput_container ginput_container_text"><input name="input_2" id="input_4_2" type="text" value="" class="large" aria-invalid="false" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"> </div></div><div id="field_4_3" class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_3">Field Error (submit empty field to see error styling)<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label><div class="ginput_container ginput_container_text"><input name="input_3" id="input_4_3" type="text" value="" class="large" aria-required="true" aria-invalid="false"> </div></div><div id="field_4_4" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_4">Select (choose an option to see selected/focused styling)</label><div class="ginput_container ginput_container_select"><select name="input_4" id="input_4_4" class="large gfield_select" aria-invalid="false"><option value="Choose an option...">Choose an option...</option><option value="First Choice">First Choice</option><option value="Second Choice">Second Choice</option><option value="Third Choice">Third Choice</option></select></div></div><div id="field_4_5" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_5">Text Area (enter text to see text styling)</label><div class="ginput_container ginput_container_textarea"><textarea name="input_5" id="input_4_5" class="textarea large" placeholder="Placeholder" aria-invalid="false" rows="10" cols="50"></textarea></div></div><div id="field_4_7" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_7">Phone (enter number to see text styling)</label><div class="ginput_container ginput_container_phone"><input name="input_7" id="input_4_7" type="text" value="" class="large" placeholder="(XXX) XXX-XXXX" aria-invalid="false"></div></div><div id="field_4_8" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_8">File</label><div class="ginput_container ginput_container_fileupload"><input type="hidden" name="MAX_FILE_SIZE" value="67108864"><input name="input_8" id="input_4_8" type="file" class="large" aria-describedby="gfield_upload_rules_4_8" onchange="javascript:gformValidateFileSize( this, 67108864 );"><span class="gform_fileupload_rules" id="gfield_upload_rules_4_8">Max. file size: 64 MB.</span><div class="validation_message validation_message--hidden-on-empty" id="live_validation_message_4_8"></div></div></div><fieldset id="field_4_9" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><legend class="gfield_label">Radio</legend><div class="ginput_container ginput_container_radio"><div class="gfield_radio" id="input_4_9">
<div class="gchoice gchoice_4_9_0">
<input class="gfield-choice-input" name="input_9" type="radio" value="Radio Select 1" id="choice_4_9_0" onchange="gformToggleRadioOther( this )">
<label for="choice_4_9_0" id="label_4_9_0">Radio Select 1</label>
</div>
<div class="gchoice gchoice_4_9_1">
<input class="gfield-choice-input" name="input_9" type="radio" value="Radio Select 2 with a second line of text" id="choice_4_9_1" onchange="gformToggleRadioOther( this )">
<label for="choice_4_9_1" id="label_4_9_1">Radio Select 2 with a second line of text</label>
</div>
<div class="gchoice gchoice_4_9_2">
<input class="gfield-choice-input" name="input_9" type="radio" value="Radio Select 3" id="choice_4_9_2" onchange="gformToggleRadioOther( this )">
<label for="choice_4_9_2" id="label_4_9_2">Radio Select 3</label>
</div></div></div></fieldset><fieldset id="field_4_10" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><legend class="gfield_label gfield_label_before_complex">Checkbox</legend><div class="ginput_container ginput_container_checkbox"><div class="gfield_checkbox" id="input_4_10"><div class="gchoice gchoice_4_10_1">
<input class="gfield-choice-input" name="input_10.1" type="checkbox" value="Checkbox Select 1" id="choice_4_10_1">
<label for="choice_4_10_1" id="label_4_10_1">Checkbox Select 1</label>
</div><div class="gchoice gchoice_4_10_2">
<input class="gfield-choice-input" name="input_10.2" type="checkbox" value="Checkbox Select 2 with a second line of text" id="choice_4_10_2">
<label for="choice_4_10_2" id="label_4_10_2">Checkbox Select 2 with a second line of text</label>
</div><div class="gchoice gchoice_4_10_3">
<input class="gfield-choice-input" name="input_10.3" type="checkbox" value="Checkbox Select 3" id="choice_4_10_3">
<label for="choice_4_10_3" id="label_4_10_3">Checkbox Select 3</label>
</div></div></div></fieldset><fieldset id="field_4_11" class="gfield field_sublabel_above field_description_below gfield_visibility_visible"><legend class="gfield_label gfield_label_before_complex">Time</legend><div class="ginput_complex">
<div class="gfield_time_hour ginput_container ginput_container_time" id="input_4_11">
<label class="hour_label" for="input_4_11_1">Hour</label>
<input type="text" maxlength="2" name="input_11[]" id="input_4_11_1" value="00" placeholder="HH" aria-required="false">
</div>
<div class="above hour_minute_colon">:</div>
<div class="gfield_time_minute ginput_container ginput_container_time">
<label class="minute_label" for="input_4_11_2">Minutes</label>
<input type="text" maxlength="2" name="input_11[]" id="input_4_11_2" value="00" placeholder="MM" aria-required="false">
</div>
<div class="gfield_time_ampm ginput_container ginput_container_time above">
<select name="input_11[]" id="input_4_11_3">
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
</div>
</div></fieldset><div id="field_4_13" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_13">Date</label><div class="ginput_container ginput_container_date">
<input name="input_13" id="input_4_13" type="text" value="" class="datepicker mdy datepicker_with_icon gdatepicker_with_icon hasDatepicker initialized" placeholder="Pick a date." aria-describedby="input_4_13_date_format" aria-invalid="false"><img class="ui-datepicker-trigger" src="https://hamodia-2021.local.zill.as/wp-content/plugins/gravityforms/images/datepicker/datepicker.svg" alt="Select date" title="Select date">
<span id="input_4_13_date_format" class="screen-reader-text">MM slash DD slash YYYY</span>
</div>
<input type="hidden" id="gforms_calendar_icon_input_4_13" class="gform_hidden" value="https://hamodia-2021.local.zill.as/wp-content/plugins/gravityforms/images/datepicker/datepicker.svg"></div></div></div>
<div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_4" class="gform_button button" value="Submit" onclick="if(window["gf_submitting_4"]){return false;} window["gf_submitting_4"]=true; " onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_4"]){return false;} window["gf_submitting_4"]=true; jQuery("#gform_4").trigger("submit",[true]); }"> <input type="hidden" name="gform_ajax" value="form_id=4&title=1&description=1&tabindex=0">
<input type="hidden" class="gform_hidden" name="is_submit_4" value="1">
<input type="hidden" class="gform_hidden" name="gform_submit" value="4">
<input type="hidden" class="gform_hidden" name="gform_unique_id" value="">
<input type="hidden" class="gform_hidden" name="state_4" value="WyJ7XCI5XCI6W1wiNGZmZjdiMzNkNzc5ZmFjZDdlZTJjYWRiZmM0ZGQwNzRcIixcIjkyMzk1MmEyOTVkNzYxZTU5NDJmYWNkNmM4N2JhYzE5XCIsXCI4NDEwODYwZGNjZDEyZjM4MjE2YTQ2N2JhMTBmOWQ0NFwiXX0iLCI1YzRjYTFhNjhmOThhN2QzMGFkMDQxMTkwYzU5Nzg2MSJd">
<input type="hidden" class="gform_hidden" name="gform_target_page_number_4" id="gform_target_page_number_4" value="0">
<input type="hidden" class="gform_hidden" name="gform_source_page_number_4" id="gform_source_page_number_4" value="1">
<input type="hidden" name="gform_field_values" value="">
</div>
</form>
</div>
我尝试在 fiddle 的 CSS 的第 24 行使用 background-size:50%;。
如何在复选框的内外正方形之间创建间隙？
方法有很多种，例如
input[type='checkbox'] {width: 18px; height: 18px; border: 1px solid #ccc; position: relative; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: text-bottom;}
input[type='checkbox']:before {content: ''; position: absolute; top: 2px; left: 2px; background: #ccc; width: 12px; height: 12px;}
input[type='checkbox']:checked {border-color: blue}
input[type='checkbox']:checked:before {background: blue}
<label>
<input type="checkbox">
Checkbox 1
</label>
<label>
<input type="checkbox">
Checkbox 2
</label>