SCSS / SASS实现

更现代的方法

对于使用SCSS(或容易转换为SASS)的人来说，下面的内容将会有所帮助。有效地，在复选框旁边创建一个元素，这就是您要设置样式的元素。当单击复选框时，CSS重新设置姐妹元素的样式(为您选中的新样式)。代码如下:

label.checkbox { input[type="checkbox"] { visibility: hidden; display: block; height: 0; width: 0; position: absolute; overflow: hidden; &:checked + span { background: $accent; } } span { cursor: pointer; height: 15px; width: 15px; border: 1px solid $accent; border-radius: 2px; display: inline-block; transition: all 0.2s $interpol; } } <label class="checkbox"> <input type="checkbox" /> <span></span> Label text </label>

不，你仍然不能设置复选框本身的样式，但我(最终)想出了如何在保持单击复选框的功能的同时设置一个错觉的样式。这意味着即使光标不是完全静止，你也可以切换它，而不用冒险选择文本或触发拖放!

这个解决方案可能也适用于单选按钮。

以下内容在ie9、Firefox 30.0和Chrome 40.0.2214.91中都可以使用，这只是一个基本示例。您仍然可以将它与背景图像和伪元素结合使用。

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* Needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* Remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* Negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* Make it transparent */
    z-index: 666; /* Place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>

我更喜欢使用图标字体(如fontawesme)，因为它很容易用CSS修改它们的颜色，而且它们在高像素密度的设备上缩放得非常好。这里是另一个纯CSS变体，使用类似于上面的技术。

(下面是一个静态图像，这样你可以可视化结果;请参阅JSFiddle的交互式版本。)

与其他解决方案一样，它使用label元素。相邻的span保存复选框字符。

span.bigcheck-target { font-family: FontAwesome; /* Use an icon font for the checkbox */ } input[type='checkbox'].bigcheck { position: relative; left: -999em; /* Hide the real checkbox */ } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */ } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\f046"; /* fontawesome checked box (fa-check-square-o) */ } /* ==== Optional - colors and padding to make it look nice === */ body { background-color: #2C3E50; color: #D35400; font-family: sans-serif; font-weight: 500; font-size: 4em; /* Set this to whatever size you want */ } span.bigcheck { display: block; padding: 0.5em; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck"> Cheese <input type="checkbox" class="bigcheck" name="cheese" value="yes" /> <span class="bigcheck-target"></span> </label> </span>

这是它的JSFiddle。

这帮助我更改复选框的样式(颜色)

input[type=checkbox] {
  accent-color: red;
}

我们也可以对单选按钮使用相同的方法。

通过使用Materialize和一个自定义样式表，你可以实现这样的东西:

CSS代码

.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
  border: 2px solid transparent;
  border-bottom: 2px solid #ffd600;
  border-right: 2px solid #ffd600;
  background: transparent;
}

HTML代码

<label>
    <input type="checkbox" class="custom_checkbox" />
    <span>Text</span>
</label>

Demo

JSFiddle演示

我会听从SW4的建议。现在不是了:Volomike的答案比这里的所有答案都要好得多(注意我在回答的评论中建议的改进)。继续阅读这个答案，如果你对这个答案所评论的其他方法感到好奇。

首先，隐藏复选框并用自定义span覆盖它，建议使用以下HTML:

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

标签的包装整齐地允许点击文本，而不需要“for-id”属性链接。然而,

不要使用visibility: hidden或display: none隐藏它

它通过点击或点击来工作，但这是使用复选框的蹩脚方式。有些人仍然使用更有效的Tab键来移动焦点，Space键来激活，用这种方法隐藏会禁用它。如果表单很长，可以节省一些时间来使用tabindex或accesskey属性。如果你观察系统复选框的行为，有一个不错的阴影悬停。样式良好的复选框应该遵循此行为。

cobberboy的答案是推荐字体Awesome，它通常比位图更好，因为字体是可伸缩的向量。使用上面的HTML，我建议以下CSS规则:

Hide checkboxes input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; } I use just negative z-index since my example uses big enough checkbox skin to cover it fully. I don't recommend left: -999px since it is not reusable in every layout. Bushan wagh's answer provides a bulletproof way to hide it and convince the browser to use tabindex, so it is a good alternative. Anyway, both is just a hack. The proper way today is appearance: none, see Joost's answer: input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; } Style checkbox label input[type="checkbox"] + span { font: 16pt sans-serif; color: #000; } Add checkbox skin input[type="checkbox"] + span:before { font: 16pt FontAwesome; content: '\00f096'; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }

\00f096是fontawesome的方形，填充被调整为在焦点上提供均匀的虚线轮廓(见下文)。

添加复选框选中的皮肤 Input [type="checkbox"]:已检查+ span:before { 内容:“\ 00 f046”; ｝

\00f046是Font Awesome的check-square-o，它和square-o的宽度不一样，这就是上面width样式的原因。

添加焦点轮廓 Input [type="checkbox"]:焦点+ span:before { 轮廓:1px虚线#aaa; ｝ Safari不提供这个功能(参见@Jason Sankey的评论)，只支持Safari的CSS 为禁用复选框设置灰色 Input [type="checkbox"]:disabled + span { 颜色:# 999; ｝ 在非禁用复选框上设置悬停阴影 Input [type="checkbox"]:not(:禁用)+ span:hover:before { text-shadow: 0 1px 2px #77F; ｝

Test it on JS Fiddle

Try to hover the mouse over the checkboxes and use Tab and Shift+Tab to move and Space to toggle.