Stil Bootstrap 4 Benutzerdefinierte Kontrollkästchen

Wie kann ich eine Formatvorlage benutzerdefinierte Kontrollkästchen in der Bootstrap-4? Ich habe alles versucht, aber ich kann auch nicht ändern seine Hintergrundfarbe.

Dies ist mein code-Gliederung:

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>

Was muss ich den Gegner hier? Könnte jemand mir zeigen, wie das ändern der hintergrund?

Danke.

InformationsquelleAutor hemoglobin | 2017-05-27
  1. 8

    CSS:

    .custom-control{
  background-color: grey;
}

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>

    • Was ist, wenn ich ein benutzerdefiniertes Häkchen gesetzt ist, dh aus einem icon-font wie font-awesome? Wie kann ich das erreichen?
    • Wenn Sie Folgen Sie den offiziellen bootstrap 4.1 Dokumentation finden Sie, dass die Klassen in den falschen Komponenten hier und das wird nicht funktionieren. "custom-Steuerung" sollte in einem umgebenden div mit "custom-checkbox" als gut, und die Bezeichnung sollte nur "custom-control-input" - Klasse. Haben Sie einen Blick auf @manuxi 's beantworten stackoverflow.com/a/50499312/1042409
    InformationsquelleAutor Malathy Venkatesan
  2. 8

    Klappte es bei mir mit

    .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #caca4c;
}
    • Dies ist die richtige Antwort für bootstrap 4.1
    • Ist die richtige Antwort für 4.0 zu
    • danke für deine Antwort -- wäre Sie in der Lage sein, zu erarbeiten, was dies bedeutet: :checked~.custom-control-label::before?
    • Siehe Erklärung hier: w3.org/TR/selectors-3/#general-sibling-combinators
    InformationsquelleAutor manuxi
  3. 3

    Du einfach musste einfach überschreiben custom-control-indicator Stil.

    versuchen, wie unten

    HTML:

    <!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<style>
.custom-control-input:checked~.custom-control-indicator{
color:white;
background-color:red;
}
</style>
<body>

<label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>
</body>

</html>

    • Windows hat nichts zu tun mit CSS
    InformationsquelleAutor xamDev
  4. 0

    Ich habe die gleiche Frage wie olefrank. Ich will ein anderes Bild. Zum Beispiel auf unserer intranet-Formulare-Seite, um anzuzeigen, liebste, möchte ich den Benutzer wählen Sie einen Stern anstelle einer checkbox. Ich habe es für die Arbeit mit Bildern, aber ich habe das markup angegeben in der Bootstrap-4-Dokumentation:

    <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

    Dann Folgendes css:

    .custom-checkbox .custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-label::after {background-image: url(five-pointed-star.svg); background-size: 100%;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {border-color: transparent; background-color: transparent;}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {background-image: url(five-pointed-star-selected.svg); background-size: 100%;}

    Aber ich würde gerne wissen, wie man geben Sie ein Alternatives Bild mit einer web-schriftart, leider außerhalb meiner Fähigkeiten!

    InformationsquelleAutor murphyme
Schreibe einen Kommentar