如何更改單選按鈕的顏色和樣式

Question

我有一個代碼來修改，但它不工作

HTML

<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /> 

的CSS

.regular-radio:checked:after { 
    content: ' '; 
    width: 12px; 
    height: 12px; 
    border-radius: 50px; 
    position: absolute; 
    top: 3px; 
    background: #99a1a7; 
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); 
    text-shadow: 0px; 
    left: 3px; 
    font-size: 32px; 
} 
.regular-radio:checked { 
    background-color: #e9ecee; 
    color: #99a1a7; 
    border: 1px solid #adb8c0; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1); 
} 

我需要無線電盒，如： -

讓我知道我該怎麼做？

謝謝。

Answer 1

這是可能的CSS，但不是所有的瀏覽器。

在所有瀏覽器的影響：

http://www.456bereastreet.com/lab/form_controls/checkboxes/

一種可能性是使用JavaScript，例如自定義複選框：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 2

你可以不用JavaScript的。

默認情況下HTML工作，以便您的標籤將觸發輸入。這意味着你可以隱藏你的輸入，並在你的標籤上放置一個psudo元素。通過這種方式，您可以設置您想要的任何單選按鈕/複選框。 現在我沒有測試下面的代碼，把它應該接近這個。順便說一句， 。輸入中沒有顯示任何內容的原因是，由於某些原因，它會導致IOS崩潰。

<label for="test"> 
<input type="radio" id="test" /> 
</label> 

CSS

input { 
    position: absolute; 
    left: - 999em; 
    } 
     label { 
     position relative; 
     padding-left: 30px; 
     } 
     label:before { 
     content: ""; 
     display: block; 
height: 10px; 
width: 10px; 
     background: url(yourBackgroundImage.png) no-repeat 0 0; 
     position: absolute; 
     left: 0; 
     top: 2px; 
     } 

Answer 3

我認爲這是一個圓形的複選框。不是一個單選按鈕。這是它是如何做到的。

• 這裏是的jsfiddle：http://jsfiddle.net/X55am/
• 下面是一些額外的：http://codepen.io/bbodine1/pen/novBm

HTML

<div class="roundedTwo"> 
    <input type="checkbox" value="None" id="roundedTwo" name="check" /> 
    <label for="roundedTwo"></label> 
</div> 

CSS

body { 
    background: #555; 
} 
input[type=checkbox] { 
    visibility: hidden; 
} 
/* ROUNDED TWO */ 
.roundedTwo { 
    width: 28px; 
    height: 28px; 
    background: #fcfff4; 

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0); 
    margin: 20px auto; 

    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    position: relative; 
} 

.roundedTwo label { 
    cursor: pointer; 
    position: absolute; 
    width: 20px; 
    height: 20px; 

    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    left: 4px; 
    top: 4px; 

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -o-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%); 
    background: linear-gradient(top, #222 0%, #45484d 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d',GradientType=0); 
} 

.roundedTwo label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    width: 9px; 
    height: 5px; 
    background: transparent; 
    top: 5px; 
    left: 4px; 
    border: 3px solid #fcfff4; 
    border-top: none; 
    border-right: none; 

    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.roundedTwo label:hover::after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
    filter: alpha(opacity=30); 
    opacity: 0.3; 
} 

.roundedTwo input[type=checkbox]:checked + label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
}