¿Cómo le doy estilo a los botones de radio y etiquetas (css)?

Question

Dado el siguiente código, ¿cómo puedo diseñar los botones de opción para que estén al lado de las etiquetas y diseñar la etiqueta del botón de opción seleccionado de manera diferente a las otras etiquetas?

<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">

<div class="input radio">
  <fieldset>
    <legend>What color is the sky?</legend>
    <input type="hidden" name="color" value="" id="SubmitQuestion" />
    <input type="radio" name="color" id="SubmitQuestion1" value="1"  />
    <label for="SubmitQuestion1">A strange radient green.</label>
    <input type="radio" name="color" id="SubmitQuestion2" value="2"  />
    <label for="SubmitQuestion2">A dark gloomy orange</label>
    <input type="radio" name="color" id="SubmitQuestion3" value="3"  />
    <label for="SubmitQuestion3">A perfect glittering blue</label>
  </fieldset>
</div>

También déjame decirte que uso los estilos CSS de Yui como base.Si no está familiarizado con ellos, puede encontrarlos aquí:

• restablecer-fonts-grids.css
• base-min.css

Documentación para ambos aquí: Yahoo!Biblioteca de interfaz de usuario

@pkaeding:Gracias.Intenté flotar ambas cosas que parecían estropeadas.El botón de opción de estilo activo parecía factible con alguna entrada [tipo = radio]: nominación activa en una búsqueda de Google, pero no logré que funcionara correctamente.Entonces la pregunta, supongo, es más:¿Es esto posible en todos los navegadores modernos de hoy en día? Si no, ¿cuál es el JS mínimo necesario?

Answer 1

La primera parte de su pregunta se puede resolver solo con HTML y CSS;necesitarás usar Javascript para la segunda parte.

Obtener la etiqueta cerca del botón de opción

No estoy seguro de lo que quieres decir con "al lado de":¿En la misma línea y cerca, o en líneas separadas?Si desea que todos los botones de opción estén en la misma línea, simplemente use los márgenes para separarlos.Si quieres que cada uno de ellos tenga su propia línea, tienes dos opciones (a menos que quieras aventurarte en float: territorio):

• Usar <br />s para dividir las opciones y algo de CSS para alinearlas verticalmente:

<style type='text/css'>
    .input input
    {
        width: 20px;
    }
</style>
<div class="input radio">
    <fieldset>
        <legend>What color is the sky?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  />
        <label for="SubmitQuestion1">A strange radient green.</label>
        <br />
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  />
        <label for="SubmitQuestion2">A dark gloomy orange</label>
        <br />
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  />
        <label for="SubmitQuestion3">A perfect glittering blue</label>
    </fieldset>
</div>

• Seguir Una lista aparteEl artículo de: Formularios más accesibles

Aplicar un estilo a la etiqueta + botón de opción actualmente seleccionado

Diseñar el <label> Es por eso que necesitarás recurrir a Javascript.una biblioteca como jQueryes perfecto para esto:

<style type='text/css'>
    .input label.focused
    {
        background-color: #EEEEEE;
        font-style: italic;
    }
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('.input :radio').focus(updateSelectedStyle);
        $('.input :radio').blur(updateSelectedStyle);
        $('.input :radio').change(updateSelectedStyle);
    })

    function updateSelectedStyle() {
        $('.input :radio').removeClass('focused').next().removeClass('focused');
        $('.input :radio:checked').addClass('focused').next().addClass('focused');
    }
</script>

El focus y blur Se necesitan ganchos para que esto funcione en IE.

Answer 2

Para cualquier navegador compatible con CSS3, puede utilizar un selector de hermanos adyacentes para diseñar tus etiquetas

input:checked + label {
    color: white;
}  

MDN tabla de compatibilidad del navegador dice que esencialmente todos los navegadores populares actuales (Chrome, IE, Firefox, Safari), tanto en computadoras de escritorio como en dispositivos móviles, son compatibles.

Answer 3

Esto hará que los botones y las etiquetas estén uno al lado del otro, al menos.Creo que la segunda parte no se puede hacer solo en CSS y necesitará JavaScript.Encontré una página que podría ayudarte con esa parte también, pero no tengo tiempo ahora para probarla: http://www.webmasterworld.com/forum83/6942.htm

<style type="text/css">
.input input {
  float: left;
}
.input label {
  margin: 5px;
}
</style>
<div class="input radio">
    <fieldset>
        <legend>What color is the sky?</legend>
        <input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1"  />
        <label for="SubmitQuestion1">A strange radient green.</label>

        <input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2"  />
        <label for="SubmitQuestion2">A dark gloomy orange</label>
        <input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3"  />
        <label for="SubmitQuestion3">A perfect glittering blue</label>
    </fieldset>
</div>