jQuery UI - cambio de colores de botón

Question

Uso de jQuery UI Tengo dos botones de radio, Aprobar/Rechazar, que me gustaría diseñar de forma independiente, por lo que cuando se selecciona 'Aprobar', será azul, y cuando se seleccione 'Rechazar' , será de color rojo:

Disculpas por mi terrible maqueta botón rojo :-) Esperamos que esto le dará una idea de lo que busco. Intenté cambiar la clase de ambos botones/etiquetas, pero esto no se refleja en la superposición jQuery-UI.

Aquí está mi código actual que está generando los botones, y también mostrando una garrapata o una cruz en función de la selección:

$('.approvedToggle').buttonset(); 

$('input:radio').click(function() { 
    if($(this).val() === 'approve') { 
     $(this).parent('div').children(".tick").show(); 
     $(this).parent('div').children(".cross").hide(); 
    } else { 
     $(this).parent('div').children(".tick").hide(); 
     $(this).parent('div').children(".cross").show(); 
    } 
}); 

Cualquier ayuda sería muy apreciada - gracias!

Answer 1

Lo que debe hacer es anular el estilo predeterminado de jQuery UI.

Esto es lo que los estados documentation:

Si se necesita un mayor nivel de personalización, hay clases específicos para los widgets que se hace referencia en el jquery.ui.button.css hoja de estilo que puede ser modificado. Estas clases están resaltadas en negrita a continuación.

marcado muestra con jQuery UI CSS clases marco

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> <span class="ui-button-text">Button Label</span> </button>

Así que, básicamente, lo que puede hacer, es algo como esto:

HTML:

<div id="approvedToggle"> 
    <input type="radio" id="ApproveButton" name="radio" /> 
    <label id="ApproveButtonLabel" for="ApproveButton">Approve</label> 

    <input type="radio" id="RejectButton" name="radio" /> 
    <label id="RejectButtonLabel" for="RejectButton">Reject</label> 
</div>​ 

CSS(¡Importante!Este estilo debe ser declarada después del archivo CSS jQuery UI):

#ApproveButtonLabel.ui-state-active { background: blue; } 
#ApproveButtonLabel.ui-state-active span.ui-button-text { color: red; } 

#RejectButtonLabel.ui-state-active { background: red; } 
#RejectButtonLabel.ui-state-active span.ui-button-text { color: blue; } 

jQuery:

$('#approvedToggle').buttonset();​ 

salida:

See the working jsFiddle demo

Answer 2

lo uso para jQueryUI botón

CSS:

button.red-button 
{ 
    background:radial-gradient(#FF0000,#660000); 
    color:white; 
    border-color:#660000; 
} 
button.red-button:hover 
{ 
    background:radial-gradient(#FF0000,#880000); 
    color:white; 
    border-color:#660000; 
} 
button.red-button:active 
{ 
    background:radial-gradient(#FF0000,#660000); 
    color:white; 
    border-color:#660000; 
} 

html:

<button class="red-button">Button</button> 

Para que tal caso puede utilizar:

CSS:

input.red-button 
input.red-button:hover 
input.red-button:active