wake-up-neo.com

Wie ändere ich die Farbe der Optionsfelder?

Ich meine, ein Optionsfeld selbst besteht aus einer runden Form und einem Punkt in der Mitte (wenn der Button ausgewählt ist). Was ich ändern möchte, ist die Farbe von beiden. Kann das mit CSS gemacht werden? 

htmlcssformsradio-button
62
catandmouse

Ein Optionsfeld ist ein natives Element, das für jedes Betriebssystem/jeden Browser spezifisch ist. Es ist nicht möglich, die Farbe/den Stil zu ändern, es sei denn, Sie möchten benutzerdefinierte Bilder implementieren oder eine benutzerdefinierte Javascript-Bibliothek verwenden, die Bilder enthält (z. B. this - zwischengespeicherte Verknüpfung ).

53
Fred

Eine schnelle Lösung wäre die Überlagerung des Optionsfeld-Eingabestils mit :after. Es ist jedoch wahrscheinlich eine bessere Vorgehensweise, ein eigenes benutzerdefiniertes Toolkit zu erstellen.

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>

60
JamieD

Nur Wenn Sie auf Webkit-basierte Browser abzielen (Chrome und Safari, vielleicht entwickeln Sie eine Chrome WebApp, wer weiß ...), können Sie Folgendes verwenden:

input[type='radio'] {
   -webkit-appearance: none;
}

Und stylen Sie es dann so, als ob es ein einfaches HTML-Element wäre, beispielsweise ein Hintergrundbild.

Verwenden Sie input[type='radio']:active für die Auswahl der Eingabe, um die alternativen Grafiken bereitzustellen

Update : Ab 2018 können Sie Folgendes hinzufügen, um mehrere Browseranbieter zu unterstützen:

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
29
Omiod

Wie Fred erwähnt hat, gibt es keine Möglichkeit, Optionsfelder in Bezug auf Farbe, Größe und usw. nativ zu gestalten. Sie können jedoch CSS-Pseudo-Elemente verwenden, um einen Betrüger für ein bestimmtes Optionsfeld einzurichten und es zu gestalten. Berühren Sie, was JamieD gesagt hat, wie wir das: after Pseudo-Element verwenden können, können Sie beides verwenden: before und: after, um einen gewünschten Look zu erzielen.

Vorteile dieses Ansatzes:

  • Gestalten Sie Ihr Optionsfeld und fügen Sie eine Bezeichnung für den Inhalt hinzu.
  • Ändern Sie die Farbe der äußeren Felge und/oder den ausgewählten Kreis in eine beliebige Farbe.
  • Verändern Sie das Aussehen der Hintergrundfarbe und/oder die optionale Verwendung der Opazitätseigenschaft transparent.
  • Skalieren Sie die Größe Ihres Optionsfelds.
  • Fügen Sie bei Bedarf verschiedene Schlagschatteneigenschaften hinzu, z. B. den CSS-Schatteneinschub.
  • Fügen Sie diesen einfachen CSS/HTML-Trick in verschiedene Grid-Systeme ein, z. B. in Bootstrap 3.3.6, sodass er optisch mit den übrigen Bootstrap-Komponenten übereinstimmt.

Erklärung der kurzen Demo unten:

  • Richten Sie für jedes Optionsfeld einen relativen Inline-Block ein
  • Blenden Sie das native Optionsfeld aus. Es gibt keine Möglichkeit, es direkt zu formatieren.
  • Gestalten Sie das Etikett und richten Sie es aus
  • CSS-Inhalt auf dem: before Pseudo-Element neu erstellen, um zwei Dinge zu tun - gestalten Sie den äußeren Rand des Optionsfelds und das Set-Element so, dass es zuerst erscheint (links vom Etiketteninhalt). Sie können grundlegende Schritte zu Pseudo-Elementen hier lernen - http://www.w3schools.com/css/css_pseudo_elements.asp
  • Wenn das Optionsfeld markiert ist, fordern Sie die Beschriftung an, um anschließend den CSS-Inhalt (den Punkt im Optionsfeld) anzuzeigen.

Das HTML

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

Das CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

Eine kurze Demo um es in Aktion zu sehen

Abschließend sind keine JavaScript, Bilder oder Batterien erforderlich. Reines CSS.

23
klewis

sie können das Kontrollkästchen hack verwenden, wie in CSS-Tricks erläutert

http://css-tricks.com/the-checkbox-hack/

funktionsbeispiel für das Optionsfeld:

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

Funktioniert in IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+ und Chrome.

9
Amit Choukroun

Sie können benutzerdefinierte Optionsfelder auf zwei reine CSS-Arten erstellen

  1. Entfernen Sie das Standard-Erscheinungsbild mit CSS appearance und wenden Sie das benutzerdefinierte Erscheinungsbild an. Leider funktionierte dies in IE für Desktop nicht (funktioniert aber in IE für Windows Phone). Demo:

    input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
  display: flex;
  align-items: center;
}
    <div class="flex">
  <input type="radio" name="radio" id="radio1" />
  <label for="radio1">RadioButton1</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">RadioButton2</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">RadioButton3</label>
</div>

  2. Durch Ausblenden des Radiobuttons und Festlegen des benutzerdefinierten Radiobutton-Erscheinungsbildes auf Pseudoselektor von label. Übrigens ist hier keine absolute Positionierung erforderlich (in den meisten Demos sehe ich absolute Positionierung). Demo: 

    *,
*:before,
*:after {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  margin-right: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
label {
  display: flex;
  align-items: center;
}
    <input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>

6
Vadim Ovchinnikov

beispiel für ein einfaches Cross-Browser-benutzerdefiniertes Optionsfeld

.checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
    background-size: 12px;
    position: relative;
    top: 1px;
    left: -2px;
}
<div class="checkbox">
  <input type="radio" name="sort" value="popularity" id="sort1">
  <label for="sort1">
        <i></i>
        <span>first</span>
    </label>

  <input type="radio" name="sort" value="price" id="sort2">
  <label for="sort2">
        <i></i>
        <span>second</span>
    </label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

5
kuzroman

Um zusätzliche Elemente zu erstellen, können wir: after,: before verwenden (damit wir den HTML-Code nicht so oft ändern müssen). Dann können Sie für Optionsfelder und Kontrollkästchen Folgendes verwenden: Markiert. Es gibt auch einige andere Pseudo-Elemente, die wir verwenden können (wie zum Beispiel: hover). Mit einer Mischung davon können wir einige ziemlich coole benutzerdefinierte Formulare erstellen. Überprüfen Sie dies

4
GkDreamz

Wie bereits gesagt, gibt es keine Möglichkeit, dies in allen Browsern zu erreichen. Daher ist Crossbrowser die beste Möglichkeit, Javascript unauffällig zu verwenden. Grundsätzlich müssen Sie Ihren Radiobutton in Links umwandeln (vollständig über CSS anpassbar). Jeder Klick auf den Link wird an die entsprechende Radiobox gebunden und wechselt zu seinem Status und allen anderen. 

1
fcalderan

Versuchen Sie diese CSS mit Übergang:

 enter image description here

Demo

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

Html:

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>
1
Ahmad Aghazadeh

Sie benötigen auch etwas Javascript. hier zum Beispiel.

1
kgiannakakis

Dies ist bei nativem CSS nicht möglich. Sie müssen Hintergrundbilder und einige Javascript-Tricks verwenden.

1
joni

Es kann hilfreich sein, das Optionsfeld an die Stilbezeichnung zu binden. Weitere Details in diese Antwort .

0
snowerest

Eine clevere Methode wäre es, ein eigenes div mit einer Höhe und Breite von beispielsweise 50px zu erstellen und dann einen Radius von 50px über Ihre Optionsfelder zu legen.

0
Issmeil EL.