突出顯示與CSS單選按鈕

Question

我一直試圖突出顯示與CSS單選按鈕，但一直沒有成功，以獲得樣式在FireFox中工作。我看到一些使用圖像渲染突出顯示的方法。有多種瀏覽器處理單選按鈕高亮的首選方法嗎？

例

<input type="text" style="border-color:#FF0000"> 
<input type="radio" style="border-color:#FF0000"> 

文本框將有一個邊界是紅色，但單選按鈕不會採取邊框顏色？

Answer 1

單選按鈕是操作系統級別的控件，不能像文本框那樣真正地進行樣式設置。如果您將單選按鈕包裹在DIV中或您可以將突出顯示應用於DIV。

Answer 2

統一是一個很好的JavaScript庫，它取代了圖形版本的窗體控件，你可以很好地控制：http://pixelmatrixdesign.com/uniform/。這本身並不是一個新想法，但Uniform的控件可能是正確做到這一點的最佳嘗試 - 它們是健壯的，跨瀏覽器兼容的，並且可以在需要時正常降級。

Answer 3

試試這個

<style>.imageless-css-3-form-elements label { cursor: hand; cursor: pointer; }

.imageless-css-3-form-elements label input[type="checkbox"], 
    .imageless-css-3-form-elements label input[type="radio"], 
    .imageless-css-3-form-elements label input[type="checkbox"] + span, 
    .imageless-css-3-form-elements label input[type="radio"] + span, 
    .imageless-css-3-form-elements label input[type="checkbox"] + span::before, 
    .imageless-css-3-form-elements label input[type="radio"] + span::before 
    { 
     vertical-align: middle; 
    } 

    .imageless-css-3-form-elements label input[type="checkbox"], 
    .imageless-css-3-form-elements label input[type="radio"] 
    { 
     position: absolute; 
     filter: alpha(opacity=0); 
     -moz-opacity: 0; 
     -webkit-opacity: 0; 
     opacity: 0; 
    } 

    .imageless-css-3-form-elements label input[type="checkbox"] + span, 
    .imageless-css-3-form-elements label input[type="radio"] + span, 
    .imageless-css-3-form-elements label input[type="checkbox"] + span::before, 
    .imageless-css-3-form-elements label input[type="radio"] + span::before 
    { 
     display: inline-block; 
    } 

    .imageless-css-3-form-elements label input[type="checkbox"] + span, 
    .imageless-css-3-form-elements label input[type="radio"] + span 
    { 
     font: normal 13px/14px "Segoe UI", Sans-serif; 
    } 

    .imageless-css-3-form-elements label input[type="checkbox"] + span::before 
    { 
     content: "\2714"; 
    } 

    .imageless-css-3-form-elements label input[type="checkbox"] + span::before, 
    .imageless-css-3-form-elements label input[type="radio"] + span::before 
    { 
     text-indent: -9999px; 
     width: 12px; 
     height: 12px; 
     font: bold 12px/12px Garamond, "Segoe UI", Sans-serif; 
     text-transform: uppercase; 
     border: solid 1px #0b70cd; 
     border-radius: 3px; 
     box-shadow: 0 0 1px 1px #ccc; 
     background: #0b70cd; 
     background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd); 
     background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd); 
     background: -o-linear-gradient(-45deg, #fefefe, #0b70cd); 
     background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd); 
     background: linear-gradient(-45deg, #fefefe, #0b70cd); 
     margin: 0 4px 0 0; 
    } 

    .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before, 
    .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before 
    { 
     background: #0b70cd; 
     background: -moz-linear-gradient(45deg, #fefefe, #0b70cd); 
     background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd); 
     background: -o-linear-gradient(45deg, #fefefe, #0b70cd); 
     background: -ms-linear-gradient(45deg, #fefefe, #0b70cd); 
     background: linear-gradient(45deg, #fefefe, #0b70cd); 
     box-shadow: 0 0 1px 2px #ccc; 
    } 

    .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before, 
    .imageless-css-3-form-elements label input[type="radio"]:checked + span::before 
    { 
     text-indent: 2px; 
     color: #fff; 
     text-shadow: 0 0 2px #0b70cd; 
    } 

    .imageless-css-3-form-elements label input[type="radio"] + span::before 
    { 
     content: "\2022"; 
     font-size: 22px; 
     -moz-border-radius: 12px; 
     -webkit-border-radius: 12px; 
     border-radius: 12px; 
    } 

    .imageless-css-3-form-elements label input[type="radio"]:checked + span::before 
    { 
     text-indent: 2px; 
    } 

    .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before, 
    .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before 
    { 
     filter: alpha(opacity=50); 
     -moz-opacity: .5; 
     -webkit-opacity: .5; 
     opacity: .5; 
    } 

    .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span, 
    .imageless-css-3-form-elements label input[type="radio"]:disabled + span, 
    .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before, 
    .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before 
    { 
     cursor: default; 
    } 
    </style> 
     <h2>Imageless CSS3 Checkboxes</h2> 
    <h3>Enabled</h3> 
    <ul class="imageless-css-3-form-elements"> 
     <li><label><input type="checkbox"><span>unchecked</span></label></li> 
     <li><label><input type="checkbox" checked="checked"><span>checked</span></label></li> 
    </ul> 
    <h3>Disabled</h3> 
    <ul class="imageless-css-3-form-elements"> 
     <li><label><input type="checkbox" disabled="disabled"><span>unchecked</span></label></li> 
     <li><label><input type="checkbox" checked="checked" disabled="disabled"><span>checked</span></label></li> 
    </ul> 
    <h2>Imageless CSS3 Radio Buttons</h2> 
    <h3>Enabled Group</h3> 
    <ul class="imageless-css-3-form-elements"> 
     <li><label><input type="radio" checked="checked" name="radio-button-group-0"><span>radio</span></label></li> 
     <li><label><input type="radio" name="radio-button-group-0"><span>radio</span></label></li> 
     <li><label><input type="radio" name="radio-button-group-0"><span>radio</span></label></li> 
    </ul> 
    <h3>Disabled Group</h3> 
    <ul class="imageless-css-3-form-elements"> 
     <li><label><input type="radio" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li> 
     <li><label><input type="radio" checked="checked" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li> 
     <li><label><input type="radio" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li> 
    </ul>