wake-up-neo.com

CSS-Attribut "Hintergrundfarbe" funktioniert nicht in dem Kontrollkästchen in <div>

Die Überschrift erklärt es ziemlich genau. Ich habe ein paar Checkboxen in einem scrollbaren div. Aus bestimmten Gründen funktioniert das Attribut 'Hintergrundfarbe' jedoch nicht. Obwohl das 'Margin-Top' zu funktionieren scheint ...

Rätselhaft, wie ein Attribut funktionieren kann und ein anderes nicht. Es ist auch nicht so, als hätte das div einen eigenen Satz von Hintergrundfarbattributen, die möglicherweise die Attribute der Kontrollkästchen übersteigen.

Unten ist mein HTML (das von JSP generiert wird):

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

Und hier ist mein 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;
        }

Vielen Dank im Voraus für alle, die mich in die richtige Richtung weisen können!

38
Tiwaz89

Ein Kontrollkästchen hat keine Hintergrundfarbe. Wenn Sie ein Kontrollkästchen mit einem div umschreiben möchten, das die Farbe ... hat, sollte Ihre Ausgabe in etwa folgendermaßen aussehen:

<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>
54
dov.amir

Zusätzlich zu der aktuell akzeptierten Antwort: Sie können Rahmen und Hintergrund eines Kontrollkästchens/eines Radiobuttons festlegen, die endgültige Darstellung hängt jedoch vom Browser ab. Zum Beispiel, wenn Sie für ein Kontrollkästchen einen roten Hintergrund festlegen

  • IE zeigt stattdessen einen roten Rand
  • Opera zeigt wie beabsichtigt einen roten Hintergrund
  • Firefox, Safari und Chrome machen nichts

Dieser Artikel vergleicht einige Browser und erläutert mindestens das Verhalten von IE. Es ist vielleicht etwas älter (immer noch einschließlich Netscape), aber wenn Sie herum testen, werden Sie feststellen, dass sich nicht viel geändert hat. Ein weiterer Vergleich findet sich hier .

18
Louise

Sie können Pseudoelemente wie folgt verwenden:

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>

14

Meine Lösung

Ursprünglich geschrieben hier .

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>

1
agirault

Eine andere Antwort hier verbessern

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

Die beste Lösung zum Ändern der Hintergrundfarbe des Kontrollkästchens

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

Nach so viel Mühe habe ich es bekommen. 

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

Es wird so sein, wenn mit diesem Code geprüft wird .  enter image description here

0
lilhamad