有一种方法可以使用CSS来做到这一点。我们可以(ab)使用label元素并样式化该元素。需要注意的是，这将不适用于Internet Explorer 8及更低版本。

.myCheckbox输入{ 位置:相对; z - index: -9999; ｝ .myCheckbox span { 宽度:20 px; 高度:20 px; 显示:块; 背景:url(“link_to_image”); ｝ .myCheckbox输入:checked + span { 背景:url(“link_to_another_image”); ｝ <label for="test">我的样式化的"复选框"的标签</label> <标签类= " myCheckbox " > <input type="checkbox" name="test" /> < span > < / span > < / >标签

你可以使用label元素设置复选框的样式，示例如下:

.checkbox > input[type=checkbox] { visibility: hidden; } .checkbox { position: relative; display: block; width: 80px; height: 26px; margin: 0 auto; background: #FFF; border: 1px solid #2E2E2E; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .checkbox:after { position: absolute; display: inline; right: 10px; content: 'no'; color: #E53935; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox:before { position: absolute; display: inline; left: 10px; content: 'yes'; color: #43A047; font: 12px/26px Arial, sans-serif; font-weight: bold; text-transform: capitalize; z-index: 0; } .checkbox label { position: absolute; display: block; top: 3px; left: 3px; width: 34px; height: 20px; background: #2E2E2E; cursor: pointer; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; z-index: 1; } .checkbox input[type=checkbox]:checked + label { left: 43px; } <div class="checkbox"> <input id="checkbox1" type="checkbox" value="1" /> <label for="checkbox1"></label> </div>

上面的代码还有一个FIDDLE。注意，有些CSS在旧版本的浏览器中不起作用，但我相信有一些奇特的JavaScript示例!

使用纯CSS，没有花哨的:before和:after，没有转换，您可以关闭默认外观，然后使用内联背景图像对其进行样式化，如下例所示。这适用于Chrome, Firefox, Safari，现在是Edge (Chromium Edge)。

INPUT[type=checkbox]:focus { outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 17px; height: 17px; cursor: pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color: #409fd6; background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; } <form> <label><input type="checkbox"> I Agree To Terms &amp; Conditions</label> </form>

下面是一个带有主题支持的示例。这是一种现代的CSS转换方法。绝对不需要JavaScript。

我得到了下面的代码链接在这条评论;在一个相关问题上。

编辑:我添加了单选按钮，maxshuty建议。

const selector = '.grid-container > .grid-row > .grid-col[data-theme="retro"]'; const main = () => { new CheckboxStyler().run(selector); new RadioStyler().run(selector); }; /* * This is only used to add the wrapper class and checkmark span to an existing DOM, * to make this CSS work. */ class AbstractInputStyler { constructor(options) { this.opts = options; } run(parentSelector) { let wrapperClass = this.opts.wrapperClass; let parent = document.querySelector(parentSelector) || document.getElementsByTagName('body')[0]; let labels = parent.querySelectorAll('label'); if (labels.length) labels.forEach(label => { if (label.querySelector(`input[type="${this.opts._inputType}"]`)) { if (!label.classList.contains(wrapperClass)) { label.classList.add(wrapperClass); label.appendChild(this.__createDefaultNode()); } } }); return this; } /* @protected */ __createDefaultNode() { let checkmark = document.createElement('span'); checkmark.className = this.opts._activeClass; return checkmark; } } class CheckboxStyler extends AbstractInputStyler { constructor(options) { super(Object.assign({ _inputType: 'checkbox', _activeClass: 'checkmark' }, CheckboxStyler.defaultOptions, options)); } } CheckboxStyler.defaultOptions = { wrapperClass: 'checkbox-wrapper' }; class RadioStyler extends AbstractInputStyler { constructor(options) { super(Object.assign({ _inputType: 'radio', _activeClass: 'pip' }, RadioStyler.defaultOptions, options)); } } RadioStyler.defaultOptions = { wrapperClass: 'radio-wrapper' }; main(); /* Theming */ :root { --background-color: #FFF; --font-color: #000; --checkbox-default-background: #EEE; --checkbox-hover-background: #CCC; --checkbox-disabled-background: #AAA; --checkbox-selected-background: #1A74BA; --checkbox-selected-disabled-background: #6694B7; --checkbox-checkmark-color: #FFF; --checkbox-checkmark-disabled-color: #DDD; } [data-theme="dark"] { --background-color: #111; --font-color: #EEE; --checkbox-default-background: #222; --checkbox-hover-background: #444; --checkbox-disabled-background: #555; --checkbox-selected-background: #2196F3; --checkbox-selected-disabled-background: #125487; --checkbox-checkmark-color: #EEE; --checkbox-checkmark-disabled-color: #999; } [data-theme="retro"] { --background-color: #FFA; --font-color: #000; --checkbox-default-background: #EEE; --checkbox-hover-background: #FFF; --checkbox-disabled-background: #BBB; --checkbox-selected-background: #EEE; --checkbox-selected-disabled-background: #BBB; --checkbox-checkmark-color: #F44; --checkbox-checkmark-disabled-color: #D00; } /* General styles */ html { width: 100%; height: 100%; } body { /*background: var(--background-color); -- For demo, moved to column. */ /*color: var(--font-color); -- For demo, moved to column. */ background: #777; width: calc(100% - 0.5em); height: calc(100% - 0.5em); padding: 0.25em; } h1 { font-size: 1.33em !important; } h2 { font-size: 1.15em !important; margin-top: 1em; } /* Grid style - using flex */ .grid-container { display: flex; height: 100%; flex-direction: column; flex: 1; } .grid-row { display: flex; flex-direction: row; flex: 1; margin: 0.25em 0; } .grid-col { display: flex; flex-direction: column; height: 100%; padding: 0 1em; flex: 1; margin: 0 0.25em; /* If not demo, remove and uncomment the body color rules */ background: var(--background-color); color: var(--font-color); } .grid-cell { width: 100%; height: 100%; } /* The checkbox wrapper */ .checkbox-wrapper, .radio-wrapper { display: block; position: relative; padding-left: 1.5em; margin-bottom: 0.5em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox and radio buttons */ .checkbox-wrapper input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .radio-wrapper input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkbox-wrapper .checkmark { position: absolute; top: 0; left: 0; height: 1em; width: 1em; background-color: var(--checkbox-default-background); transition: all 0.2s ease-in; } .radio-wrapper .pip { position: absolute; top: 0; left: 0; height: 1em; width: 1em; border-radius: 50%; background-color: var(--checkbox-default-background); transition: all 0.2s ease-in; } /* Disabled style */ .checkbox-wrapper input[type="checkbox"]:disabled~.checkmark, .radio-wrapper input[type="radio"]:disabled~.pip { cursor: not-allowed; background-color: var(--checkbox-disabled-background); color: var(--checkbox-checkmark-disabled-color); } .checkbox-wrapper input[type="checkbox"]:disabled~.checkmark:after, .radio-wrapper input[type="radio"]:disabled~.pip:after { color: var(--checkbox-checkmark-disabled-color); } .checkbox-wrapper input[type="checkbox"]:disabled:checked~.checkmark, .radio-wrapper input[type="radio"]:disabled:checked~.pip { background-color: var(--checkbox-selected-disabled-background); } /* On mouse-over, add a grey background color */ .checkbox-wrapper:hover input[type="checkbox"]:not(:disabled):not(:checked)~.checkmark, .radio-wrapper:hover input[type="radio"]:not(:disabled):not(:checked)~.pip { background-color: var(--checkbox-hover-background); } /* When the checkbox is checked, add a blue background */ .checkbox-wrapper input[type="checkbox"]:checked~.checkmark, .radio-wrapper input[type="radio"]:checked~.pip { background-color: var(--checkbox-selected-background); } /* Create the checkmark/indicator (hidden when not checked) */ .checkbox-wrapper .checkmark:after { display: none; width: 100%; position: absolute; text-align: center; content: "\2713"; color: var(--checkbox-checkmark-color); line-height: 1.1em; } .radio-wrapper .pip:after { display: none; width: 100%; position: absolute; text-align: center; content: "\2022"; color: var(--checkbox-checkmark-color); font-size: 1.5em; top: -0.2em; } /* Show the checkmark when checked */ .checkbox-wrapper input[type="checkbox"]:checked~.checkmark:after { display: block; line-height: 1.1em; } .radio-wrapper input[type="radio"]:checked~.pip:after { display: block; line-height: 1.1em; } <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" /> <div class="grid-container"> <div class="grid-row"> <div class="grid-col"> <div class="grid-cell"> <h1>Pure CSS</h1> <h2>Checkbox</h2> <label class="checkbox-wrapper">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Three <input type="checkbox" checked disabled> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Four <input type="checkbox" disabled> <span class="checkmark"></span> </label> <h2>Radio</h2> <label class="radio-wrapper">One <input type="radio" name="group-x"> <span class="pip"></span> </label> <label class="radio-wrapper">Two <input type="radio" name="group-x"> <span class="pip"></span> </label> <label class="radio-wrapper">Three <input type="radio" name="group-x" checked disabled> <span class="pip"></span> </label> <label class="radio-wrapper">Four <input type="radio" name="group-x" disabled> <span class="pip"></span> </label> </div> </div> <div class="grid-col" data-theme="dark"> <div class="grid-cell"> <h1>Pure CSS</h1> <h2>Checkbox</h2> <label class="checkbox-wrapper">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Three <input type="checkbox" checked disabled> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Four <input type="checkbox" disabled> <span class="checkmark"></span> </label> <h2>Radio</h2> <label class="radio-wrapper">One <input type="radio" name="group-y"> <span class="pip"></span> </label> <label class="radio-wrapper">Two <input type="radio" name="group-y"> <span class="pip"></span> </label> <label class="radio-wrapper">Three <input type="radio" name="group-y" checked disabled> <span class="pip"></span> </label> <label class="radio-wrapper">Four <input type="radio" name="group-y" disabled> <span class="pip"></span> </label> </div> </div> <div class="grid-col" data-theme="retro"> <div class="grid-cell"> <h1>JS + CSS</h1> <h2>Checkbox</h2> <label>One <input type="checkbox" checked="checked"></label> <label>Two <input type="checkbox"></label> <label>Three <input type="checkbox" checked disabled></label> <label>Four <input type="checkbox" disabled></label> <h2>Radio</h2> <label>One <input type="radio" name="group-z" checked="checked"></label> <label>Two <input type="radio" name="group-z"></label> <label>Three <input type="radio" name="group-z" checked disabled></label> <label>Four <input type="radio" name="group-z" disabled></label> </div> </div> </div> </div>

隐藏输入，并在下一个元素中添加一个before，以创建等价的复选框

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

input[type="checkbox"] + label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  background-color:red;
}

input[type="checkbox"]:checked + label:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

有一种方法可以使用CSS来做到这一点。我们可以(ab)使用label元素并样式化该元素。需要注意的是，这将不适用于Internet Explorer 8及更低版本。

.myCheckbox输入{ 位置:相对; z - index: -9999; ｝ .myCheckbox span { 宽度:20 px; 高度:20 px; 显示:块; 背景:url(“link_to_image”); ｝ .myCheckbox输入:checked + span { 背景:url(“link_to_another_image”); ｝ <label for="test">我的样式化的"复选框"的标签</label> <标签类= " myCheckbox " > <input type="checkbox" name="test" /> < span > < / span > < / >标签