Jak zmienić kolor przycisków opcji?


110

Chodzi mi o to, że sam przycisk opcji składa się z okrągłego kształtu i kropki pośrodku (gdy przycisk jest wybrany). To, co chcę zmienić, to kolor obu. Czy można to zrobić za pomocą CSS?

Odpowiedzi:


71

Przycisk opcji to natywny element, specyficzny dla każdego systemu operacyjnego / przeglądarki. Nie ma możliwości zmiany koloru / stylu, chyba że chcesz zaimplementować niestandardowe obrazy lub użyć niestandardowej biblioteki JavaScript, która zawiera obrazy (np. To - link w pamięci podręcznej )


Tak mi się wydaje. Żadna przeglądarka, którą znam, nie przedstawia sposobu na skonfigurowanie wyglądu przycisków radiowych, będziesz musiał użyć biblioteki JS, aby to osiągnąć.
Fred

Lub użyj css, ale potrzebujesz obrazu, jak powiedziałeś. To trochę dziwne
AturSams,

1
Post 8/1/2014: Ta metoda będzie teraz wyłączać i usuwać pole wejściowe z przesłanych danych formularza. To w odpowiedzi na nadużycia firm, które umieściły checkboxy poza zasięgiem wzroku, zadeklarowały, że ich użytkownicy wyrazili zgodę na pozwolenie i regulamin, którego odwiedzający nie mogli ocenić przed kontynuowaniem. Jeśli literalny przycisk nie jest wyświetlany na ekranie, jest uważany za „wyłączony”
ppostma1

2
Przeczytaj moją odpowiedź poniżej na nowoczesne rozwiązanie wykorzystujące CSS.
klewis

„ten” link ma obecnie 404 ”. Jeśli kiedykolwiek wróci, daj nam znać!
markreyes

104

Szybkim rozwiązaniem byłoby nałożenie stylu wprowadzania przycisków radiowych za pomocą :after, jednak prawdopodobnie lepszą praktyką jest utworzenie własnego niestandardowego zestawu narzędzi.

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


2
To działało dobrze dla mnie. Świetne rozwiązanie, gdy nie chcesz dodawać żadnych dodatkowych elementów ani używać obrazów.
Swen

2
Generalnie przeglądarki akceptują styl ": after" tylko dla elementów kontenera - zgodnie z definicją w W3C. Dane wejściowe nie są kontenerem i dlatego generalnie nie są obsługiwane po stylizacji. w3.org/TR/CSS2/generate.html#before-after-content
Ina

Wystarczy wstawić sygnaturę czasową, aby wymusić wcześniejsze obserwacje - nadal działa tylko w Chrome (60.0.3112.90). Wypróbowałem to na Microsoft Edge (38.14393.1066.0) i Firefox (54.0.1, 32-bit), ale bez kości.
markreyes

1
Aktualizacja z @markreyes: działa w Chrome (64-bitowy 73.0.3683.75), działa trochę w Safari (12.0.3) i nie działa w Firefoksie (64-bit 65.0.1) 15 marca 2019 r.
jarhill0

38

Jak wspomniał Fred, nie ma sposobu na natywne stylizowanie przycisków radiowych pod względem koloru, rozmiaru itp. Ale możesz użyć pseudoelementów CSS, aby ustawić oszusta dla dowolnego przycisku opcji i nadać mu styl. Dotykając tego, co powiedział JamieD, w jaki sposób możemy użyć: after Pseudo element, możesz użyć obu: before i: after, aby uzyskać pożądany wygląd.

Korzyści z tego podejścia:

  • Nadaj styl przyciskowi opcji, a także dołącz etykietę treści.
  • Zmień kolor zewnętrznej obręczy i / lub kółko w kratkę na dowolny kolor.
  • Nadaj mu przezroczysty wygląd, modyfikując właściwość koloru tła i / lub opcjonalne użycie właściwości krycia.
  • Skaluj rozmiar przycisku opcji.
  • W razie potrzeby dodaj różne właściwości cienia, takie jak wstawka cienia CSS.
  • Połącz tę prostą sztuczkę CSS / HTML z różnymi systemami Grid, takimi jak Bootstrap 3.3.6, aby wizualnie dopasować pozostałe komponenty Bootstrap.

Objaśnienie krótkiego demo poniżej:

  • Skonfiguruj względny blok w linii dla każdego przycisku opcji
  • Ukryj natywny przycisk opcji, ponieważ nie ma możliwości bezpośredniego określenia stylu.
  • Nadaj styl i wyrównaj etykietę
  • Przebudowanie zawartości CSS na: before Pseudoelement, aby zrobić 2 rzeczy - nadać styl zewnętrznej krawędzi przycisku opcji i ustawić element tak, aby pojawiał się jako pierwszy (po lewej stronie zawartości etykiety). Możesz nauczyć się podstawowych kroków na pseudoelementach tutaj - http://www.w3schools.com/css/css_pseudo_elements.asp
  • Jeśli przycisk opcji jest zaznaczony, poproś o etykietę, aby wyświetlić zawartość CSS (stylizowaną kropkę w przycisku opcji).

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>

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

Krótkie demo , aby zobaczyć go w akcji

Podsumowując, nie jest wymagany JavaScript, obrazy ani baterie. Czysty CSS.


1
Ta technika działała dla mnie w Chrome (60.0.3112.90). Wypróbowałem to również na Microsoft Edge (38.14393.1066.0) i Firefox (54.0.1, 32-bit).
markreyes

1
Działa dla mnie w Safari 11.1 (najnowsza).
staxim

34

Tylko jeśli celujesz w przeglądarki oparte na webkitach (Chrome i Safari, być może tworzysz aplikację Chrome WebApp, kto wie ...), możesz użyć:

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

Następnie nadaj mu styl, jakby był prostym elementem HTML, na przykład stosując obraz tła.

Posługiwać się input[type='radio']:active gdy wybrane jest wejście, aby zapewnić alternatywną grafikę

Aktualizacja : od 2018 r. Można dodać następujące elementy, aby obsługiwać wielu dostawców przeglądarek:

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

1
wygląd jest oznaczony jako technologia eksperymentalna: developer.mozilla.org/en-US/docs/Web/CSS/appearance
HBCondo

1
Działał jak urok!
Supercool.

Zamiast używać :active, należy użyć :checkeddo rozróżnienia stylów między „wybranymi” przyciskami radiowymi.
Daan

17

Możesz uzyskać spersonalizowane przyciski opcji na dwa czyste sposoby CSS

  1. Poprzez usunięcie standardowego wyglądu za pomocą CSS appearancei zastosowanie wyglądu niestandardowego. Niestety to nie działa w IE na komputer (ale działa w IE na Windows Phone). Próbny:

    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. Poprzez ukrycie radiobutton i ustawienie niestandardowego wyglądu radiobutton na labelpseudoselektor. Nawiasem mówiąc, nie ma tu potrzeby pozycjonowania absolutnego (widzę pozycjonowanie absolutne w większości dem). Próbny:

    *,
    *: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>



5

prosty przykład niestandardowego przycisku opcji dla różnych przeglądarek

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


To nie działa w przypadku bootstrapa, czy możesz zaktualizować za pomocą bootstrapa
Krishna Jonnalagadda

4

Cóż, aby stworzyć dodatkowe elementy, możemy użyć: after,: before (więc nie musimy tak bardzo zmieniać HTML). Następnie dla przycisków radiowych i pól wyboru możemy użyć: zaznaczone. Jest jeszcze kilka innych pseudo elementów, których możemy użyć (np. Hover). Używając ich mieszanki, możemy stworzyć całkiem fajne niestandardowe formularze. Sprawdź to


3

Zbudowałem kolejny fork przykładowego kodu @ klewis , aby zademonstrować pewne granie z czystym CSS i gradientami, używając: before /: after pseudoelementy i ukrytego przycisku radiowego.

wprowadź opis obrazu tutaj

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

podgląd: https://www.codeply.com/p/y47T4ylfib


2

Spróbuj tego CSS z przejściem:

wprowadź opis obrazu tutaj

Próbny

$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

Nie jest to możliwe przez natywny CSS. Będziesz musiał użyć obrazów tła i kilku sztuczek javascript.


1

Jak powiedzieli inni, nie ma sposobu, aby to osiągnąć we wszystkich przeglądarkach, więc najlepszym sposobem na zrobienie tego w różnych przeglądarkach jest dyskretne używanie javascript. Zasadniczo musisz zamienić swój radiobutton w linki (w pełni konfigurowalne przez CSS). każde kliknięcie odsyłacza będzie powiązane z odpowiednim radioboxem, przełączając jego stan i wszystkie inne.



0

Sprytnym sposobem na zrobienie tego byłoby utworzenie oddzielnego elementu div o wysokości i szerokości-na przykład 50 pikseli, a następnie umieszczenie go w promieniu 50 pikseli na przyciskach opcji ...


0

Możesz osadzić element span w wejściu radiowym, a następnie wybrać wybrany kolor, który ma być renderowany, gdy wejście radiowe jest zaznaczone. Sprawdź poniższy przykład pochodzący z w3schools.

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

Zmiana koloru tła w tym segmencie kodu poniżej załatwia sprawę.

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

Pochodzi z tego, jak utworzyć niestandardowy przycisk opcji


-1

Prostą poprawką byłoby użycie następującej właściwości CSS.

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.