Стилизация радиокнопок CSS

333

21 апреля 2017, 18:22

Подскажите пожалуйста, как стилизовать радиокнопки подобным образом?

Answer 1

input { 
    opacity: 0; 
    position: absolute;    
} 
  
input, label { 
    display: inline-block; 
    vertical-align: middle; 
    cursor: pointer; 
} 
  
label { 
    position: relative; 
} 
 
input + label:before { 
    content: 'RU'; 
    background: #fff; 
    border: 2px solid #ddd; 
    display: inline-block; 
    vertical-align: middle; 
    width: 25px; 
    height: 25px; 
    padding: 2px; 
    text-align: center; 
} 
input:checked + label:before { 
    background: #56CFD2; 
    color: #fff; 
    border-color:#3eb9bc; 
}

    <input name="select-1" id="mktoCheckbox_46078_0" type="radio" value="Checkbox 1" class="mktoField"> 
    <label for="mktoCheckbox_46078_0"></label> 
    <input name="select-1" id="mktoCheckbox_46078_1" type="radio" value="Checkbox 2" class="mktoField"> 
    <label for="mktoCheckbox_46078_1"></label>

Ну, а там дальше как вам нужно стилизуйте.

Answer 2

На базе ответа от Oleksandr

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            .c1{ 
                height:0px; 
                margin:0; 
                opacity:0; 
                width:0px; 
            } 
            .l1{ 
                background-color:aqua; 
                display:inline-block; 
                font-size:15px; 
                font-weight:bold; 
                padding:10px; 
            } 
            .c1:checked + .l1{ 
               background-color:blue; 
               color:white; 
            } 
        </style> 
    </head> 
    <body> 
        <input type='radio' name='r' id='r1' class='c1'><label for='r1' class='l1'>EN</label> 
        <input type='radio' name='r' id='r2' class='c1'><label for='r2' class='l1'>FR</label> 
        <input type='radio' name='r' id='r3' class='c1'><label for='r3' class='l1'>GM</label> 
    </body> 
</html>

Answer 3

Можно стилизировать label и по родительским, сзязям смотреть на связаный input