相关疑难解决方法(0)

我正在尝试使用以下方式设置复选框的样式:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

但风格并未适用.该复选框仍显示其默认样式.我如何给它指定的样式？

标题几乎解释了它.我在可滚动的div中有几个复选框.但由于某些原因,'background-color'属性不起作用.虽然'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;
        }

提前感谢任何可以指引我正确方向的人!

我只需要使用html和CSS创建一个自定义复选框.到目前为止,我有:

HTML/CSS:

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px …

我有一个非常简单的问题，但我找不到一个简单的答案。

我有一个如下所示的复选框：

<input type="checkbox">

我想在选中此复选框时仅更改背景颜色。

有没有一种简单的方法可以在 CSS 或 JS 中做到这一点？