Radyo düğmelerinin rengini nasıl değiştiririm?

Demek istediğim, bir radyo düğmesinin kendisi yuvarlak bir şekil ve ortadaki bir noktadan oluşur (düğme seçildiğinde). Değiştirmek istediğim şey ikisinin de rengi. Bu CSS kullanılarak yapılabilir mi?

Bir radyo düğmesi, her işletim sistemine / tarayıcıya özgü yerel bir öğedir. Özel görüntüler uygulamak veya görüntüleri içeren özel bir Javascript kitaplığı kullanmak istemediğiniz sürece rengini / stilini değiştirmenin bir yolu yoktur (örneğin, bu - önbelleğe alınmış bağlantı )

Hızlı bir düzeltme, radyo düğmesi giriş stilini kullanarak üst üste koymak olabilir :after, ancak kendi özel araç setinizi oluşturmak muhtemelen daha iyi bir uygulamadır.

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

Fred'in bahsettiği gibi, renk, boyut, vb. Açısından radyo düğmelerini yerel olarak biçimlendirmenin bir yolu yoktur. Ancak, herhangi bir radyo düğmesinin bir sahtekarını ayarlamak ve stilini belirlemek için CSS Sözde öğelerini kullanabilirsiniz. JamieD'nin söylediklerine değinerek: after Pseudo öğesini nasıl kullanabileceğimize değinerek, istenen bir görünüm elde etmek için her ikisini de kullanabilirsiniz: before ve: after.

Bu yaklaşımın faydaları:

• Radyo düğmenizin stilini belirleyin ve ayrıca içerik için bir etiket ekleyin.
• Dış kenar rengini ve / veya işaretli daireyi istediğiniz herhangi bir renge değiştirin.
• Arka plan rengi özelliğinde yapılan değişiklikler ve / veya opaklık özelliğinin isteğe bağlı kullanımıyla şeffaf bir görünüm verin.
• Radyo düğmenizin boyutunu ölçekleyin.
• Gerektiğinde CSS alt gölge eki gibi çeşitli alt gölge özellikleri ekleyin.
• Bu basit CSS / HTML numarasını, Bootstrap 3.3.6 gibi çeşitli Grid sistemlerine karıştırın, böylece Bootstrap bileşenlerinizin geri kalanıyla görsel olarak eşleşir.

Aşağıdaki kısa demo açıklaması:

• Her radyo düğmesi için göreceli bir satır içi blok oluşturun
• Yerel radyo düğmesi hissini gizleyin, onu doğrudan biçimlendirmenin bir yolu yoktur.
• Etiketi biçimlendirin ve hizalayın
• CSS içeriğini: before Pseudo-element üzerinde 2 şey yapmak için yeniden oluşturma - radyo düğmesinin dış kenarının stilini belirleyin ve öğeyi önce görünecek şekilde ayarlayın (etiket içeriğinin solunda). Sözde öğelerle ilgili temel adımları buradan öğrenebilirsiniz - http://www.w3schools.com/css/css_pseudo_elements.asp
• Radyo düğmesi işaretlenirse, etiketin daha sonra CSS içeriğini (radyo düğmesindeki stilli nokta) göstermesini isteyin.

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

İş başında görmek için kısa bir demo

Sonuç olarak, JavaScript, resim veya pil gerektirmez. Saf CSS.

Yalnızca webkit tabanlı tarayıcıları hedefliyorsanız (Chrome ve Safari, belki bir Chrome WebApp geliştiriyorsunuz, kim bilir ...), aşağıdakileri kullanabilirsiniz:

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

Ve sonra, örneğin bir arka plan görüntüsü uygulamak gibi basit bir HTML öğesi gibi biçimlendirin.

input[type='radio']:activeAlternatif grafikler sağlamak için giriş seçildiğinde kullanın

Güncelleme : 2018 itibariyle, birden çok tarayıcı tedarikçisini desteklemek için aşağıdakileri ekleyebilirsiniz:

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

Özelleştirilmiş radyo düğmelerini iki saf CSS yöntemiyle elde edebilirsiniz

1. CSS kullanarak standart görünümü kaldırarak appearanceve özel görünüm uygulayarak. Ne yazık ki bu Masaüstü için IE'de çalışmıyordu (ancak Windows Phone için IE'de çalışıyor). 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>

   Kod parçacığını çalıştırınSonuçları gizle

   Snippet'i genişlet

2. Radyo düğmesini gizleyerek ve özel radyo düğmesi görünümünü labelsözde seçiciye ayarlayarak . Bu arada burada mutlak konumlandırmaya gerek yok (çoğu demoda mutlak konumlandırma görüyorum). 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>

   Kod parçacığını çalıştırınSonuçları gizle

   Snippet'i genişlet

css hilelerinde açıklandığı gibi onay kutusu hackini kullanabilirsiniz

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

radyo düğmesinin çalışma örneği:

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

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

IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome her şeyde çalışır.

sizin için basit çapraz tarayıcı özel radyo düğmesi örneği

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

Ekstra öğeler oluşturmak için kullanabileceğimiz: after,: before (bu nedenle HTML'yi çok fazla değiştirmemiz gerekmez). Ardından radyo düğmeleri ve onay kutuları için kullanabiliriz: işaretlendi. Kullanabileceğimiz birkaç başka sözde öğe daha var (örneğin: hover). Bunların bir karışımını kullanarak oldukça havalı özel formlar oluşturabiliriz. şuna göz at

Bazılarının saf css ve gradyanlarla oynamasını göstermek için: before /: after sözde öğeler ve gizli bir radyo giriş düğmesi kullanarak @ klewis'in kod örneğinin başka bir çatalını oluşturdum .

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

önizleme: https://www.codeply.com/p/y47T4ylfib

Bu css'yi geçişle deneyin:

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>

Bu, yerel CSS ile mümkün değildir. Arka plan resimlerini ve bazı javascript püf noktalarını kullanmanız gerekecek.

Başka bir deyişle, bunu tüm tarayıcılarda elde etmenin bir yolu yoktur, bu yüzden bunu yapmanın en iyi yolu, javascript'i göze çarpmadan kullanmaktır. Temel olarak, radyo düğmenizi bağlantılara dönüştürmeniz gerekir (CSS aracılığıyla tamamen özelleştirilebilir). bağlantıya yapılan her tıklama, ilgili radyo kutusuna bağlanır, durumu ve diğerlerinin tümü değişir.

Radyo düğmesini stilli etikete bağlamak faydalı olabilir. İçinde detayli ayrıntıları bu cevap .

Bunu yapmanın akıllıca bir yolu, yüksekliği ve genişliği 50 piksel olan ayrı bir div oluşturmak ve ardından bunu radyo düğmelerinizin üzerine 50 piksellik bir yarıçap koymaktır ...

Radyo girişine bir yayılma öğesi yerleştirebilir ve ardından bir radyo girişi kontrol edildiğinde görüntülenmek üzere seçtiğiniz bir rengi seçebilirsiniz. Aşağıdaki w3schools kaynaklı örneğe göz atın.

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

Aşağıdaki kod segmentinde arka plan rengini değiştirmek hile yapar.

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

Kaynaklı özel bir radyo düğmesini nasıl oluşturulacağını

Basit bir düzeltme, aşağıdaki CSS özelliğini kullanmak olacaktır.

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