在 firefox 中设置复选框的样式 - 删除检查和边框

Posted 2023-03-06

【中文标题】在 firefox 中设置复选框的样式 - 删除检查和边框

【英文标题】：Style a checkbox in firefox — remove check and border

【发布时间】：2013-10-09 08:14:38

【问题描述】：

如何在 Firefox 中设置复选框的样式，并使复选标记和边框消失？

http://jsfiddle.net/moneylotion/qZvtY/

CSS：

body  background: black; 
#conditions-form  color: white; 
#conditions-form input[type=checkbox] 
    display:inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
    width:19px;
    height:19px;
    background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left;
    cursor:pointer;

#conditions-form input[type=checkbox]:checked 
    background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left;

HTML：

<form id="conditions-form">
    <ul>
        <li>
            <input id="condition3" type="checkbox" name="conditions[condition3]"></input>
            <label class="checkbox" for="condition3">Conditions 3</label>
        </li>
    </ul>
</form>

【问题讨论】：

看起来不可能：coderwall.com/p/a7tbrq

请看这个问题***.com/q/4148499/1741542

可能类似的问题***.com/questions/11552228/…

您介意说出您要达到的目标吗？可能还有其他方法。

【参考方案1】：

您可以通过<label> 标签轻松地做到这一点。只需在复选框周围放置一个标签，然后插入一个将用于自定义样式复选框的虚拟元素。例如：

label.checkbox input[type="checkbox"] display:none;
label.checkbox span 
  display:inline-block;
  border:2px solid #BBB;
  border-radius:10px;
  width:25px;
  height:25px;
  background:#C33;
  vertical-align:middle;
  margin:3px;
  position: relative;
  transition:width 0.1s, height 0.1s, margin 0.1s;

label.checkbox :checked + span 
  background:#6F6;
  width:27px;
  height:27px;
  margin: 2px;

label.checkbox :checked + span:after 
  content: '\2714';
  font-size: 20px;
  position: absolute;
  top: -2px;
  left: 5px;
  color: #99a1a7;

<label class="checkbox">
  <input type="checkbox"/>
  <span></span>
  I like cake
</label>

---

编辑：请注意，某些颜色选择可能会使您的复选框状态对色盲人士不可见。在编写此代码时，我没有想到这一点，但上面的演示对于 R/G 色盲的人来说可能是不可见的。在实施时，请牢记这一点（例如选择亮/暗颜色，或显示一些形状差异）

---

我使用的样式是任意的，您可以将其更改为任何您想要的样式。您甚至可以通过::before 伪元素切换其中的某些文本，例如我所做的here。

我无法打开您在问题中提供的图片网址，但我认为您只需稍微修改此代码即可包含您想要的任何图片。只需将当前的 background 颜色更改为您要使用的图像 URL。

注意：这在some older browsers 中不起作用。

【讨论】：

这真是绝妙而简单，好主意！

它可以工作，但我不建议使用 display none 属性，因为它不可访问。 @Lee Chase 解决方案更合适。

@JulioCesarBritoGomes 我不确定您的确切意思； “可访问”是什么意思？你可以使用标签点击输入，对吧？

@Joeytje50 当我谈到可访问性时，我指的是使用屏幕阅读器浏览互联网的盲人或弱视人群。屏幕阅读器（NVDA、Voice Over ...）通常会忽略任何带有 display: none 的内容，因此不会将其读出给屏幕阅读器。在nomensa.com/blog/how-improve-web-accessibility-hiding-elements 或w3.org/standards/webdesign/accessibility 上查看更多信息

【参考方案2】：

上面接受的答案很好，但 this slight tweak 来自 Joeytje50 的小提琴允许选中复选框。

使用 opacity 0 而不是 display none 意味着复选框仍然是可选项卡，因此可以通过键盘访问。

Position absolute 将输入复选框置于绘制框的左上角，这意味着您的格式保持整洁。

input[type="checkbox"] 
    opacity: 0;
    position: absolute;

input[type="checkbox"] + label 
    text-align:center;
    cursor:pointer;

input[type="checkbox"]:focus + label 
    background-color: #ddd;

input[type="checkbox"] + label div 
    display:inline-block;
    line-height: 16px;
    font-size: 12px;
    height: 16px;
    width: 16px;
    margin:-0px 4px 0 0;
    border: 1px solid black;
    color: transparent;

input[type="checkbox"]:checked + label div 
    color: black;

<input type="checkbox" id="c1" name="cc" />
<label for="c1">
    <div>&#x2714;</div>Check Box 1<br />
</label>
<input type="checkbox" id="c12" name="cc" />
<label for="c12">
    <div>&#x2714;</div>Check Box 2<br />
</label>

【讨论】：

绝对位置会打乱你的滚动，除非容器是相对位置

我非常喜欢这个解决方案 - 所以我创建了一个 forked fiddle 并在复选框中添加了一些 material bootswatch 样式（该材料 bootswatch 不支持 firefox - 因此我来搜索）

【参考方案3】：

tutsplus tutorial 解决了我的问题。

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

 
input[type="checkbox"] + label span 
  display:inline-block;
  width:19px;
  height:19px;
  margin:-1px 4px 0 0;
  vertical-align:middle;
  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
  cursor:pointer;

input[type="checkbox"]:checked + label span 
  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

【讨论】：

注： Link only answers are discouraged 好像链接消失了，那么答案就变得无用了-我将编辑此答案以添加相关的 html + CSS

【参考方案4】：

恕我直言，使用纯 css 重绘元素的更清洁的解决方案。

Codepen

                input[type="checkbox"] 
            opacity: 0;
            position: absolute;
        

        input[type="checkbox"] ~ label:before 
          content: '';
          display: inline-block;
          cursor: pointer;
          ...
          border: 3px solid #999;
          border-radius: 2px;
          transition: .3s;
        

        input[type="checkbox"]:checked ~ label:before 
          background: #333;
        

【讨论】：

这几乎有效。如果您不使用<p></p> 标记来分隔每个项目，那么您实际上是在检查单个项目以及随后的所有项目。我没有解决方案，但它甚至会检查后面的所有单选按钮。