Wie ändere ich die Farbe von Optionsfeldern?

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

Ein Optionsfeld ist ein natives Element, das für jedes Betriebssystem / jeden Browser spezifisch ist. Es gibt keine Möglichkeit , seine Farbe / Art zu ändern, es sei denn , Sie benutzerdefinierte Bilder implementieren möchten oder eine benutzerdefinierte Javascript - Bibliothek verwenden , die Bilder enthält (zB diese - im Cache gespeicherten Link )

Eine schnelle Lösung wäre, den Optionsfeld-Eingabestil mit zu überlagern. Es :afterist jedoch wahrscheinlich besser, 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"/>

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

Vorteile dieses Ansatzes:

• Gestalten Sie Ihr Optionsfeld und fügen Sie eine Beschriftung für den Inhalt hinzu.
• Ändern Sie die Farbe des äußeren Randes und / oder den markierten Kreis in eine beliebige Farbe.
• Geben Sie ihm ein transparentes Aussehen mit Änderungen an der Eigenschaft der Hintergrundfarbe und / oder der optionalen Verwendung der Opazitätseigenschaft.
• Skalieren Sie die Größe Ihres Optionsfelds.
• Fügen Sie bei Bedarf verschiedene Schlagschatteneigenschaften wie den CSS-Schlagschatteneinsatz hinzu.
• Kombinieren Sie diesen einfachen CSS / HTML-Trick mit verschiedenen Grid-Systemen wie Bootstrap 3.3.6, damit er visuell mit den übrigen Bootstrap-Komponenten übereinstimmt.

Erklärung der kurzen Demo unten:

• Richten Sie für jedes Optionsfeld einen relativen Inline-Block ein
• Wenn Sie das native Optionsfeld ausblenden, können Sie es nicht direkt formatieren.
• Gestalten und richten Sie das Etikett aus
• Neuerstellen von CSS-Inhalten auf dem: vor dem Pseudo-Element, um zwei Dinge zu tun - gestalten Sie den äußeren Rand des Optionsfelds und legen Sie fest, dass das Element zuerst angezeigt wird (links vom Beschriftungsinhalt). Grundlegende Schritte zu Pseudoelementen finden Sie hier - http://www.w3schools.com/css/css_pseudo_elements.asp
• Wenn das Optionsfeld aktiviert ist, fordern Sie die Beschriftung an, um anschließend den CSS-Inhalt (den gestalteten Punkt im Optionsfeld) anzuzeigen.

Der 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

Zusammenfassend ist kein JavaScript, keine Bilder oder Batterien erforderlich. Reines CSS.

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 dann stylen Sie es so, als wäre es ein einfaches HTML-Element, zum Beispiel ein Hintergrundbild.

Verwenden Sie diese Option, input[type='radio']:activewenn die Eingabe ausgewählt ist, um die alternativen Grafiken bereitzustellen

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

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

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

1. Durch Entfernen der Standarddarstellung mithilfe von CSS appearanceund Anwenden einer benutzerdefinierten Darstellung. Leider funktionierte dies nicht im IE für Desktop (aber im 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>

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

2. Durch Ausblenden des Radiobuttons und Einstellen des benutzerdefinierten Radiobutton-Erscheinungsbilds auf labelden Pseudoselektor. Übrigens ist hier keine absolute Positionierung erforderlich (ich sehe absolute Positionierung in den meisten Demos). 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>

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

Sie können den Checkbox-Hack verwenden, wie in CSS-Tricks erläutert

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

Arbeitsbeispiel für 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+, Chrome alles.

Beispiel für ein einfaches browserübergreifendes benutzerdefiniertes Optionsfeld für Sie

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

Nun, um zusätzliche Elemente zu erstellen, können wir verwenden: after ,: before (damit wir den HTML-Code nicht so stark ändern müssen). Dann können wir für Optionsfelder und Kontrollkästchen Folgendes aktivieren: aktiviert. Es gibt einige andere Pseudoelemente, die wir ebenfalls verwenden können (z. B.: Hover). Mit einer Mischung aus diesen können wir einige ziemlich coole benutzerdefinierte Formulare erstellen. Überprüfen Sie dies

Versuchen Sie dieses CSS mit Übergang:

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>

Ich habe eine weitere Abzweigung des Codebeispiels von @ klewis erstellt , um das Spielen mit reinem CSS und Farbverläufen zu demonstrieren, indem ich : vor /: nach Pseudoelementen und einen versteckten Radioeingabeknopf verwendete.

HTML:

sample radio buttons:
<div style="background:lightgrey;">
    <span class="radio-item">
        <input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
        <label for="ritema">True</label>
    </span>

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

::

CSS:

.radio-item input[type='radio'] {
    visibility: hidden;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0;
}
    .radio-item input[type=radio]:before {
        position: relative;
        margin: 4px -25px -4px 0;
        display: inline-block;
        visibility: visible;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px inset rgba(150,150,150,0.75);
        background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
        content: "";
    }
        .radio-item input[type=radio]:checked:after {
            position: relative;
            top: 0;
            left: 9px;
            display: inline-block;
            visibility: visible;
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            content: "";
        }
            .radio-item input[type=radio].true:checked:after {
                background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            }
            .radio-item input[type=radio].false:checked:after {
                background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
            }
.radio-item label {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

Vorschau: https://www.codeply.com/p/y47T4ylfib

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

Wie bereits erwähnt, gibt es keine Möglichkeit, dies in allen Browsern zu erreichen. Der beste Weg, dies zu tun, ist die unauffällige Verwendung von Javascript. Grundsätzlich müssen Sie Ihren Radiobutton in Links umwandeln (vollständig über CSS anpassbar). Jeder Klick auf den Link wird an die zugehörige Radiobox gebunden, wodurch sein Status und alle anderen umgeschaltet werden.

Es kann hilfreich sein, das Optionsfeld an das gestaltete Etikett zu binden. Weitere Details in dieser Antwort .

Eine clevere Möglichkeit wäre, ein separates Div mit einer Höhe und Breite von beispielsweise 50 Pixel zu erstellen und dann einen Radius von 50 Pixel über Ihre Optionsfelder zu legen ...

Sie können ein Span-Element in den Radioeingang einbetten und dann eine Farbe Ihrer Wahl auswählen, die gerendert werden soll, wenn ein Radioeingang aktiviert ist. Schauen Sie sich das folgende Beispiel an, das von w3schools stammt.

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>

Das Ändern der Hintergrundfarbe in diesem Codesegment unten reicht aus.

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

Aus dem Erstellen eines benutzerdefinierten Optionsfelds

Eine einfache Lösung wäre die Verwendung der folgenden CSS-Eigenschaft.

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}