使用CSS自定义收音机和复选框

Question

是否可以使用CSS自定义收音机和复选框的外观？我看到有很多关于这方面的内容，但大多数解决方案都需要使用图像和JavaScript。

Answer 1

看起来像bootswatch.com上的家伙在使用纯CSS定制输入方面做得很好。我简化他们对这里的小提琴方法： https://jsfiddle.net/mthomas9261/qujbq4gs/

HTML：

<input type="radio" value="a" name="test"> 
<input type="radio" value="b" name="test"> 

<input type="checkbox" name="a" value="a"> 
<input type="checkbox" name="b" value="b"> 

CSS：

/***************************************************** 
******************  Radio  ***************** 
******************************************************/ 

/* Hide Original Radio Button */ 
input[type="radio"] { 
    position: relative; 
    margin-top: 6px; 
    margin-right: 4px; 
    vertical-align: top; 
    border: none; 
    background-color: transparent; 
    -webkit-appearance: none; 
    appearance: none; 
    cursor: pointer; 
} 
/* Remove standard blue selection outline */ 
input[type="radio"]:focus { 
    outline: none; 
} 
/* New radio button */ 
input[type="radio"]:before, 
input[type="radio"]:after { 
    content: ""; 
    display: block; 
    width: 14px; 
    height: 14px; 
    border-radius: 50%; 
    -webkit-transition: 240ms; 
    -o-transition: 240ms; 
    transition: 240ms; 
} 
input[type="radio"]:before { 
    position: absolute; 
    left: 1px; 
    top: -2px; 
    background-color: red; 
    -webkit-transform: scale(0); 
    -ms-transform: scale(0); 
    -o-transform: scale(0); 
    transform: scale(0); 
} 
input[type="radio"]:after { 
    position: relative; 
    top: -3px; 
    border: 1px solid #E0E0E0; 
} 
/* New radio checked */ 
input[type="radio"]:checked:before { 
    -webkit-transform: scale(0.5); 
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5); 
    transform: scale(0.5); 
} 
input[type="radio"]:checked:after { 
    border-color: #E0E0E0; 
} 
/* New radio disabled */ 
input[type="radio"]:disabled:after, 
input[type="radio"]:disabled:checked:after { 
    border-color: #F1F1F1; 
} 
input[type="radio"]:disabled:checked:before { 
    background-color: #F1F1F1; 
} 

/***************************************************** 
****************  Checkbox  **************** 
******************************************************/ 
/* Hide Original Checkbox */ 
input[type="checkbox"] { 
    position: relative; 
    border: none; 
    margin-bottom: -4px; 
    -webkit-appearance: none; 
    appearance: none; 
    cursor: pointer; 
} 
/* Display New Checkox */ 
input[type="checkbox"] { 
    position: relative; 
    border: none; 
    margin-bottom: -4px; 
    -webkit-appearance: none; 
    appearance: none; 
    cursor: pointer; 
} 
input[type="checkbox"]:focus, 
.checkbox input[type="checkbox"]:focus, 
.checkbox-inline input[type="checkbox"]:focus { 
    outline: none; 
} 
input[type="checkbox"]:focus:after, 
.checkbox input[type="checkbox"]:focus:after, 
.checkbox-inline input[type="checkbox"]:focus:after { 
    border-color: #E0E0E0; 
} 
input[type="checkbox"]:after, 
.checkbox input[type="checkbox"]:after, 
.checkbox-inline input[type="checkbox"]:after { 
    content: ""; 
    display: block; 
    width: 14px; 
    height: 14px; 
    margin-top: -2px; 
    margin-right: 5px; 
    border: 1px solid #E0E0E0; 
    border-radius: 1px; 
    -webkit-transition: 240ms; 
    -o-transition: 240ms; 
    transition: 240ms; 
} 
/* Checkbox Checked */ 
input[type="checkbox"]:checked:before { 
    content: ""; 
    position: absolute; 
    top: -2px; 
    left: 5px; 
    display: table; 
    width: 4px; 
    height: 9px; 
    border: 3px solid red; 
    border-top-width: 0; 
    border-left-width: 0; 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
input[type="checkbox"]:checked:after { 
    border-color: #E0E0E0; 
} 
/* Checkbox Disabled */ 
input[type="checkbox"]:disabled:after { 
    border-color: #F1F1F1; 
} 
input[type="checkbox"]:disabled:checked:after { 
    background-color: #F1F1F1; 
    border-color: transparent; 
}