自定义复选框和单选按钮 | CSS-Tricks

这里的选择器特定于 Wufoo 标记，但其工作原理可以适用于任何表单。总体思路是通过将默认单选按钮和复选框的不透明度设置为零，使它们不可见，并用图形替换它们。然后使用 :checked 选择器在选中和未选中版本之间切换图形。

/*
  Hide the original radios and checkboxes
  (but still accessible)

  :not(#foo) > is a rule filter to block browsers
  that don't support that selector from
  applying rules they shouldn't

*/
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
  /* Hide the input, but have it still be clickable */
  opacity: 0;

  float: left;
  width: 18px;
}


li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
  margin: 0;
  clear: none;

  /* Left padding makes room for image */
  padding: 5px 0 4px 24px;

  /* Make look clickable because they are */
  cursor: pointer;

  background: url(off.png) left center no-repeat;
}

/* Change from unchecked to checked graphic */
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
  background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
  background-image: url(check.png);
}

Bradley Rosenfeld

# 2011 年 11 月 25 日

也许你可以提供一些示例 HTML 标记，这将很有帮助！

Marco Berrocal

# 2011 年 11 月 25 日

很棒。我不得不求助于 Javascript 来完成魔法。网上有一些很棒的插件。

Sunny Singh

# 2011 年 11 月 25 日

这项技术的浏览器支持如何？

Daniel

# 2011 年 11 月 25 日

我前几天一直在尝试找出一种方法来做到这一点！

不错的解决方案，谢谢…

Gavin

# 2011 年 11 月 25 日

Wufoo 博客页面说它在 IE9+ 等中有效。乍一看，我唯一能看到的阻止它在 IE7/8 中工作的部分是 :checked 选择器。

此解决方案旨在通过 CSS 完成所有操作，但如果你不介意一点点 Javascript，也许你可以通过 Javascript 检测 :checked 并根据需要将额外的 CSS 类应用于相关元素来模拟它。例如，你可以将最后两条规则重写为


li > fieldset > div > span > input.radio.checked + label {
li > fieldset > div > span > input.radio.checked + label {

在 Wufoo 的情况下，由于用户不允许添加自己的 Javascript，Wufoo 可以在其在每个表单上呈现的全局 JS 代码中添加一点点 Javascript……这样做不会造成伤害，因为你所做的只是追加额外的类名（例如，class=”field radio” 变成 class=”field radio checked” 当它被选中）。

只是个想法！

Sunny Singh

评论永久链接# 2011 年 11 月 25 日

如果你想要 IE7/8 支持，CSS + 一点点 JS 的解决方案对我来说很有意义。
radu

评论永久链接# 2014 年 1 月 1 日

http://equalto0.wordpress.com/2013/12/31/free-plugin-for-custom-input-type-checkbox-and-radio-js-small-plugin-custom-input-vs3/

也许你发现它对你很有用。即使在 IE7,8 上也能工作。
:-D

Alex Forey

# 2011 年 12 月 9 日

这个解决方案听起来很有希望——我会在回家后尝试一下，因为我还没有找到一个好的方法来实现自定义复选框。我希望 HTML5 能让这更容易…

radu

评论永久链接# 2014 年 3 月 2 日

嗨，Alex，你可以使用这个，或者更少尝试：http://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/

Jacob

# 2011 年 12 月 11 日

你也可以使用 :before 和 :after 伪元素来设置选中/未选中样式，而不是使用图像。不过，这是一个很棒的片段。

RobertoT

# 2012 年 8 月 19 日

我想分享这个奇妙技巧的略微不同的版本。
这是 HTML

&ltspan>
&ltinput type="checkbox" name="xxx" checked="checked">
&ltlabel for="xxx">A label for xxx&lt/label>
&lt/span>

这是 css

input[type='radio'], input[type='checkbox'] {
    
    opacity: 0;
    float: left;
    width: 18px;
    height:18px;
    cursor: pointer;
}


input[type='radio'] + label, input[type='checkbox'] + label {
    
margin: 0;
    margin-left:-18px;
    clear: none;
    padding: 5px 0 4px 24px;
    background: url(off.png) left center no-repeat; 
}


input[type='radio']:checked + label {
    background-image: url(radio.png);
}

input[type='checkbox']:checked + label {
    background-image: url(check.png);
}

请注意，我使用了负 margin-left 使标签与复选框（或单选按钮）重叠

如果有错误，请告诉我…

Sandeep

评论永久链接# 2013 年 4 月 30 日

你好，RobertoT，

它在 Chrome 和 Firefox 上运行，但在 IE 中它会添加一些顶部填充。无论如何，谢谢。
Sanwar

评论永久链接# 2014 年 3 月 2 日

**谢谢 **

Brian

# 2012 年 12 月 17 日

我在我正在开发的移动网站上实现了它。似乎 iOS Safari 和 Android 浏览器在多个输入和标签之间渲染间距的方式不一致。在大浏览器中，间距看起来符合预期，你可以点击标签以触发操作。在提到的移动设备上，点击标签上方的区域会触发操作。

这似乎是由于原生复选框的高度会影响间距。我想知道是否还有其他人遇到过在移动设备上实施它时的麻烦，或者是否有关于解决办法的方向的想法。

radu

评论永久链接# 2014 年 3 月 2 日

试试这个 Brian：http://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/

luqman

# 2013 年 7 月 26 日

你能告诉我这个 css 的 html 代码吗？

# 2014 年 2 月 11 日

不错。

我找到另一个使用 css 自定义 html 复选框控件的漂亮示例，请查看以下链接，希望对您有所帮助。

http://www.etechpulse.com/2014/02/on-off-custom-html-checkbox-css-in.html

谢谢

Mahiba

# 2014 年 4 月 2 日

我想更改单个单选按钮的背景图像，没有标签。

ankit

评论永久链接# 2014 年 6 月 19 日

你找到解决方案了吗？

Benedict Lemieux

# 2014 年 9 月 13 日

我喜欢使用复选标记 ✓ 用于复选框，以及圆圈 ● 和 ○ 用于单选按钮，如这里所示 http://jsfiddle.net/rLo64zaw/ 并在那里进行了简化

label:not(#foo) > input[type="checkbox"],
label input[type="checkbox"]{
    display:none;
}
label:not(#foo) > input[type="checkbox"] + span:after {
    content:'\2713';
    visibility:hidden;
}
label:not(#foo) > input[type="checkbox"]:checked + span:after {
    visibility:visible;
}
label:not(#foo) > input[type="radio"] + span:after {
    content:'\25CB';
}
label:not(#foo) > input[type="radio"]:checked + span:after {
    content:'\25CF';
}

你的印象如何？

maddy

# 2014 年 12 月 18 日

http://findnerd.com/list/view/Custom-checkbox-using-jquery/1209/

一个简单的自定义复选框示例

评论

发表回复 取消回复

发表回复取消回复