web-dev-qa-db-ja.com

CSS '' background-color "属性が<div>内のチェックボックスで機能しない

見出しでほとんど説明されています。スクロール可能なdiv内にいくつかのチェックボックスがあります。しかし、何らかの理由で「background-color」属性が機能しません。 「マージントップ」は機能しているようですが...

ある属性がどのように機能し、別の属性が機能しないのか、私には困惑させられます。また、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;
        }

私を正しい方向に導くことができる人を前もって感謝します！

htmlcsscheckboxbackground-color
39
user818700

チェックボックスには背景色がありません。各チェックボックスを色のある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>
57
dov.amir

現在受け入れられている答えに加えて、チェックボックス/ラジオボタンの境界線と背景を設定できますが、最終的にどのようにレンダリングされるかはブラウザによって異なります。たとえば、チェックボックスに赤い背景を設定した場合

  • IEは代わりに赤い枠線を表示します
  • Operaは意図したとおりに赤い背景を表示します
  • Firefox、Safari、およびChromeは何もしません

この記事 いくつかのブラウザを比較し、少なくともIEの動作を説明しています。Netscapeを含めて）少し古いかもしれませんが、テストしてみると、別の比較を見つけることができます ここ 。

18
Louise

次のような擬似要素を使用できます。

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>
16
Diego Lins de Freitas

私の解決策

最初に投稿された ここ 。

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>
6
agirault

多くのトラブルの後、私はそれを得た。

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

このコードでチェックすると次のようになります。 enter image description here

1
lilhamad

ここで別の答えを改善する

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";
}
0
Dennis T

背景チェックボックスの色を変更する最適なソリューション

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>
0
B.Abdelbasset