堆栈内存溢出
  繁体   English   中英

CSS“背景颜色”属性不适用于内部的复选框<div>

[英]CSS ''background-color" attribute not working on checkbox inside <div>

 原文  2011-09-13 07:46:54  9   10    html/ css/ checkbox/ background-color

问题描述

标题几乎解释了它。 我在可滚动的 div 中有几个复选框。 但由于某些原因，“背景颜色”属性不起作用。 虽然'margin-top'似乎确实有效......

只是让我感到困惑，一个属性如何起作用，而另一个属性不能。 它也不像 div 有它自己的一组背景颜色属性，这些属性可能会覆盖复选框属性。

无论如何，下面是我的 HTML（由 JSP 生成）：

<div class="listContainer">
    <input type="checkbox" class="oddRow">item1<br/>
    <input type="checkbox" class="evenRow">item2<br/>
    <input type="checkbox" class="oddRow">item3<br/>
    <input type="checkbox" class="evenRow">item4<br/>
    ...
</div>

这是我的CSS：

.listContainer {
            border:2px solid #ccc;
            width:340px;
            height: 225px;
            overflow-y: scroll;
            margin-top: 20px;
            padding-left: 10px;
        }

.oddRow {
            margin-top: 5px;
            background-color: #ffffff;
        }

.evenRow{
            margin-top: 5px;
            background-color: #9FFF9D;
        }

提前感谢任何可以为我指明正确方向的人！

10 个解决方案

解决方案1
 60 已采纳  2011-09-13 07:54:26

复选框没有背景颜色。

但是要添加效果，您可以使用具有颜色的div包裹每个复选框：

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>

解决方案2
 21  2012-11-14 09:14:58

除了当前接受的答案：您可以设置复选框/单选按钮的边框和背景，但最终呈现方式取决于浏览器。 例如，如果您在复选框上设置红色背景

  • IE 将显示红色边框
  • Opera 将按预期显示红色背景
  • Firefox、Safari 和 Chrome 将无所作为

这篇德语文章比较了几种浏览器，并至少解释了 IE 的行为。 它可能有点旧（仍然包括 Netscape），但是当您进行测试时，您会发现并没有太大变化。 另一个比较可以在这里找到。

解决方案3
 18  2014-08-05 17:06:46

您可以像这样使用伪元素： 

 input[type=checkbox] { width: 30px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 27px; } input[type=checkbox]:after { content: " "; background-color: #9FFF9D; display: inline-block; visibility: visible; } input[type=checkbox]:checked:after { content: "\\2714"; }
 <label>Checkbox label <input type="checkbox"> </label>

解决方案4
 10  2018-04-19 18:49:40

我的解决方案

最初张贴在这里。 

 input[type="checkbox"] { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background: lightgray; height: 16px; width: 16px; border: 1px solid white; } input[type="checkbox"]:checked { background: #2aa1c0; } input[type="checkbox"]:hover { filter: brightness(90%); } input[type="checkbox"]:disabled { background: #e6e6e6; opacity: 0.6; pointer-events: none; } input[type="checkbox"]:after { content: ''; position: relative; left: 40%; top: 20%; width: 15%; height: 40%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); display: none; } input[type="checkbox"]:checked:after { display: block; } input[type="checkbox"]:disabled:after { border-color: #7b7b7b; }
 <input type="checkbox"><br> <input type="checkbox" checked><br> <input type="checkbox" disabled><br> <input type="checkbox" disabled checked><br>

解决方案5
 8  2019-01-14 15:01:46

经过这么多的麻烦我明白了。 

 .purple_checkbox:after { content: " "; background-color: #5C2799; display: inline-block; visibility: visible; } .purple_checkbox:checked:after { content: "\\2714"; box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15); border-radius: 3px; height: 12px; display: block; width: 12px; text-align: center; font-size: 9px; color: white; }
 <input type="checkbox" class="purple_checkbox">

用这段代码检查时会是这样。 在此处输入图片说明

解决方案6
 1  2020-10-21 14:11:08

我们可以从 css 文件中提供背景颜色。 试试这个，

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type="checkbox"] {
                width: 25px;
                height: 25px;
                background: gray;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border: none;
                outline: none;
                position: relative;
                left: -5px;
                top: -5px;
                cursor: pointer;
            }
            input[type="checkbox"]:checked {
                background: blue;
            }
            .checkbox-container {
                position: absolute;
                display: inline-block;
                margin: 20px;
                width: 25px;
                height: 25px;
                overflow: hidden;
            }
        </style>    
    </head>
    <body>
        <div class="checkbox-container">
            <input type="checkbox" />
        </div>
    </body>
</html>

解决方案7
 0  2018-08-16 11:26:45

更改背景复选框颜色的最佳解决方案

 input[type=checkbox] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; } input[type=checkbox]:after { position: absolute; width: 10px; height: 15px; top: 0; content: " "; background-color: #ff0000; color: #fff; display: inline-block; visibility: visible; padding: 0px 3px; border-radius: 3px; } input[type=checkbox]:checked:after { content: "✓"; font-size: 12px; }
 <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>

解决方案8
 0  2019-07-10 17:56:52

在这里改进另一个答案

input[type=checkbox] {
  cursor: pointer;
  margin-right: 10px;
}

input[type=checkbox]:after {
  content: " ";
  background-color: lightgray;
  display: inline-block;
  position: relative;
  top: -4px;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

input[type=checkbox]:checked:after {
  content: "\00a0\2714";
}

解决方案9
 0  2022-01-25 20:06:58

2022 年，现在有更好的解决方案来解决这个问题<\/h2>

只需使用accent-color<\/code>属性并确保您不需要支持不支持此功能的过时浏览器。 ;)

解决方案10
 -4  2015-09-21 13:54:24

例如，当您输入 body 标签时，只需按一次空格而不关闭标签并输入bgcolor="red" 。 然后为您的字体选择一种差异颜色。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS背景颜色不适用于第一个div background-color不适用于div CSS 背景颜色和颜色标签不起作用 Chrome上的CSS div背景颜色错误？ CSS不将height和background-color应用于<DIV> CSS：背景色仅在边距内 在 div 中设置背景颜色不起作用 Div填充/背景色在Outlook中不起作用 div背景颜色过渡不起作用 css- background-color：#xxxxxx; 不工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM