Fatal编程技术网
  • html/
  • Html CSS''；背景色；属性不在复选框内工作<；部门>；

Html CSS''；背景色；属性不在复选框内工作<；部门>；

html css checkbox

Html CSS''；背景色；属性不在复选框内工作<；部门>；,html,css,checkbox,background-color,Html,Css,Checkbox,Background Color,标题很好地解释了这一点。我在一个可滚动的div中有几个复选框。但是由于某些原因，“background color”属性不起作用。虽然“利润率顶部”似乎确实有效 只是让我困惑的是，一个属性如何起作用，另一个属性如何不起作用。它也不像div有自己的背景色属性集，可能会超越复选框属性 总之，下面是我的HTML（由JSP生成）： 提前感谢任何能为我指出正确方向的人 复选框没有背景色 但要添加效果，您可以使用具有以下颜色的div包装每个复选框： <div class="evenRow&q

标题很好地解释了这一点。我在一个可滚动的div中有几个复选框。但是由于某些原因，“background color”属性不起作用。虽然“利润率顶部”似乎确实有效

只是让我困惑的是，一个属性如何起作用，另一个属性如何不起作用。它也不像div有自己的背景色属性集，可能会超越复选框属性

总之，下面是我的HTML（由JSP生成）：

提前感谢任何能为我指出正确方向的人

复选框没有背景色

但要添加效果，您可以使用具有以下颜色的
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>
除了当前接受的答案之外：您可以设置复选框/单选按钮的边框和背景，但最终呈现方式取决于浏览器。例如，如果在复选框上设置红色背景

  • IE将显示红色边框
  • Opera将按预期显示红色背景
  • Firefox、Safari和Chrome将一事无成
比较了几种浏览器，并至少解释了IE的行为。它可能有点旧（仍然包括Netscape），但当你四处测试时，你会注意到变化不大。可以找到另一个比较。

您可以使用类似于以下内容的peseudo元素：

输入[类型=复选框]{
宽度：30px；
高度：30px；
右边距：8px；
光标：指针；
字体大小：27px；
}
输入[类型=复选框]：在{
内容：“；
背景色：#9FFF9D；
显示：内联块；
能见度：可见；
}
输入[类型=复选框]：选中：之后{
内容：“\2714”；
}
复选框标签
输入body标签时，只需按空格键一次，而不关闭标签，然后输入
bgcolor=“red”
，例如。然后为您的字体选择一种不同的颜色。

我的解决方案 最初发布

input[type=“checkbox”]{
光标：指针；
-webkit外观：无；
-moz外观：无；
外观：无；
大纲：0；
背景：浅灰色；
高度：16px；
宽度：16px；
边框：1px纯白；
}
输入[type=“checkbox”]：选中{
背景：#2aa1c0；
}
输入[type=“checkbox”]：悬停{
滤光片：亮度（90%）；
}
输入[type=“checkbox”]：已禁用{
背景：#e6；
不透明度：0.6；
指针事件：无；
}
输入[type=“checkbox”]：在{
内容：''；
位置：相对位置；
左：40%；
最高：20%；
宽度：15%；
身高：40%；
边框：实心#fff；
边框宽度：0 2px 2px 0；
变换：旋转（45度）；
显示：无；
}
输入[type=“checkbox”]：选中：之后{
显示：块；
}
输入[type=“checkbox”]：禁用：之后{
边框颜色：#7b；
}

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

输入[类型=复选框]{
右边距：5px；
光标：指针；
字体大小：14px；
宽度：15px；
高度：12px；
位置：相对位置；
}
输入[类型=复选框]：在{
位置：绝对位置；
宽度：10px；
高度：15px；
排名：0；
内容：“；
背景色：#ff0000；
颜色：#fff；
显示：内联块；
能见度：可见；
填充：0px 3px；
边界半径：3px；
}
输入[类型=复选框]：选中：之后{
内容：“✓";
字体大小：12px；
}
我有一辆自行车

我有一辆车


我有一辆公共汽车，经过这么多的麻烦我终于找到了。


当使用此代码检查时，它将是这样的。

在这里改进另一个答案


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";
}




我们可以从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>




输入[type=“checkbox”]{
宽度：25px；
高度：25px；
背景：灰色；
-webkit外观：无；
-moz外观：无；
外观：无；
边界：无；
大纲：无；
位置：相对位置；
左：-5px；
顶部：-5px；
光标：指针；
}
输入[type=“checkbox”]：选中{
背景：蓝色；
}
.复选框容器{
位置：绝对位置；
显示：内联块；
利润率：20px；
宽度：25px；
高度：25px；
溢出：隐藏；
}

我需要15rep才能给你投票，但是谢谢！按照你的建议做了，效果很好…我的复选框bg仍然是灰色的-只有复选框周围的区域会从div更改背景。
@mariazahid我也被困在这个问题上，huking复选框的背景色不会这样做。除此之外，我不会这样做在所有浏览器中为
标记，有一个更大的问题：这很重要。不，你不能。输入不允许有孩子。Chrome实现是一个错误。如果有人能告诉我为什么我的文本在复选框后没有对齐，我很想知道！这里是CSS初学者。检查这个

.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] {
  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";
}




<!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>