Bagaimana cara mengubah warna tombol radio?

Maksud saya, tombol radio itu sendiri terdiri dari bentuk bulat dan titik di tengahnya (jika tombolnya dipilih). Yang ingin saya ubah adalah warna keduanya. Bisakah ini dilakukan dengan menggunakan CSS?

Tombol radio adalah elemen asli khusus untuk setiap OS / browser. Tidak ada cara untuk mengubah warna / gayanya, kecuali Anda ingin menerapkan gambar khusus atau menggunakan pustaka Javascript khusus yang menyertakan gambar (mis. Link ini - cache )

Perbaikan cepat adalah menghamparkan gaya masukan tombol radio menggunakan :after, namun mungkin praktik yang lebih baik adalah membuat perangkat khusus Anda sendiri.

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

Seperti yang dikatakan Fred, tidak ada cara untuk mengatur gaya tombol radio secara native dalam hal warna, ukuran, dll. Tetapi Anda dapat menggunakan elemen CSS Pseudo untuk mengatur penipu dari tombol radio tertentu, dan menatanya. Menyinggung apa yang dikatakan JamieD, tentang bagaimana kita dapat menggunakan elemen: setelah Pseudo, Anda dapat menggunakan keduanya: sebelum dan: setelah untuk mendapatkan tampilan yang diinginkan.

Manfaat pendekatan ini:

• Atur gaya tombol radio Anda dan juga Sertakan label untuk konten.
• Ubah warna tepi luar dan / atau lingkaran yang dicentang ke warna apa pun yang Anda suka.
• Berikan tampilan transparan dengan modifikasi pada properti warna latar belakang dan / atau penggunaan opsional dari properti opacity.
• Skala ukuran tombol radio Anda.
• Tambahkan berbagai properti drop shadow seperti sisipan drop shadow CSS jika diperlukan.
• Gabungkan trik CSS / HTML sederhana ini ke dalam berbagai sistem Grid, seperti Bootstrap 3.3.6, sehingga secara visual cocok dengan komponen Bootstrap Anda lainnya.

Penjelasan demo singkat di bawah ini:

• Siapkan blok in-line relatif untuk setiap tombol radio
• Sembunyikan makna tombol radio asli tidak ada cara untuk menatanya secara langsung.
• Beri gaya dan sejajarkan label
• Membangun kembali konten CSS di: before Pseudo-element untuk melakukan 2 hal - gaya tepi luar tombol radio dan setel elemen agar muncul pertama kali (di kiri konten label). Anda dapat mempelajari langkah-langkah dasar pada Pseudo-elements di sini - http://www.w3schools.com/css/css_pseudo_elements.asp
• Jika tombol radio dicentang, minta label untuk menampilkan konten CSS (titik bergaya di tombol radio) sesudahnya.

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

Sebuah demo singkat untuk melihatnya dalam tindakan

Kesimpulannya, tidak diperlukan JavaScript, gambar, atau baterai. CSS murni.

Hanya jika Anda menargetkan browser berbasis webkit (Chrome dan Safari, mungkin Anda mengembangkan Aplikasi Web Chrome, siapa tahu ...), Anda dapat menggunakan yang berikut ini:

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

Dan kemudian beri gaya seolah-olah itu adalah elemen HTML sederhana, misalnya menerapkan gambar latar belakang.

Gunakan input[type='radio']:activeuntuk saat input dipilih, untuk memberikan grafik alternatif

Pembaruan : Pada 2018 Anda dapat menambahkan yang berikut ini untuk mendukung beberapa vendor browser:

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

Anda dapat mencapai tombol radio yang disesuaikan dengan dua cara CSS murni

1. Melalui menghapus tampilan standar menggunakan CSS appearancedan menerapkan tampilan khusus. Sayangnya ini tidak berfungsi di IE untuk Desktop (tetapi berfungsi di IE untuk 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>

   Jalankan cuplikan kodeSembunyikan hasil

   Luaskan cuplikan

2. Melalui menyembunyikan tombol radio dan mengatur tampilan tombol radio kustom ke labelselektor-semu. Ngomong-ngomong, tidak perlu pemosisian absolut di sini (saya melihat pemosisian absolut di sebagian besar demo). 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>

   Jalankan cuplikan kodeSembunyikan hasil

   Luaskan cuplikan

Anda dapat menggunakan kotak centang hack seperti yang dijelaskan dalam trik css

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

contoh kerja tombol radio:

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

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

Bekerja di IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome apa saja.

contoh tombol radio kustom lintas browser sederhana untuk Anda

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

Nah untuk membuat elemen tambahan kita bisa menggunakan: after,: before (jadi kita tidak perlu banyak mengubah HTML). Kemudian untuk radio button dan checkbox bisa kita gunakan: check. Ada beberapa elemen pseudo lain yang bisa kita gunakan juga (seperti: hover). Dengan menggunakan campuran ini kita dapat membuat beberapa bentuk kustom yang cukup keren. Periksa ini

Saya membuat fork lain dari sampel kode @ klewis untuk mendemonstrasikan beberapa permainan dengan css dan gradien murni dengan menggunakan: sebelum /: setelah elemen semu dan tombol input radio tersembunyi.

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

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

Coba css ini dengan transisi:

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>

Ini tidak dimungkinkan oleh CSS asli. Anda harus menggunakan gambar latar belakang dan beberapa trik javascript.

Seperti yang dikatakan orang lain, tidak ada cara untuk mencapai ini di semua browser, jadi cara terbaik untuk melakukannya crossbrowser adalah menggunakan javascript secara tidak mencolok. Pada dasarnya Anda harus mengubah radiobutton Anda menjadi tautan (dapat disesuaikan sepenuhnya melalui CSS). setiap klik pada tautan akan terikat ke kotak radio terkait, mengubah statusnya dan yang lainnya.

Mungkin berguna untuk mengikat tombol radio ke label bergaya. Rincian lebih lanjut dalam jawaban ini .

Cara cerdas untuk melakukannya adalah dengan membuat div terpisah dengan tinggi dan lebar -misalnya- 50px dan kemudian meletakkan radius 50px di atas tombol radio Anda ...

Anda dapat menyematkan elemen span di input radio kemudian memilih warna pilihan Anda untuk ditampilkan saat input radio dicentang. Lihat contoh di bawah ini yang bersumber dari 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>

Mengubah warna latar belakang pada segmen kode di bawah ini berhasil.

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

Bersumber dari cara membuat tombol radio custom

Perbaikan sederhana akan menggunakan properti CSS berikut.

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