html - posicionar - ¿Cómo doy estilo a los botones de radio y a las etiquetas?

como posicionar un boton en html

Question

Dado el siguiente código, ¿cómo hago para que los botones de opción estén al lado de las etiquetas y la etiqueta del botón de selección seleccionado sea 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 permítanme decir que utilizo los estilos yui css como base. Si no estás familiarizado con ellos, se pueden encontrar aquí:

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

Documentación para los dos aquí: Yahoo! Biblioteca de UI

@pkaeding: Gracias. Intenté flotar con ambas cosas que parecían arruinadas. El botón de opción de estilo activo parecía ser factible con alguna entrada [type = radio]: nominación activa en una búsqueda de Google, pero no conseguí que funcionara correctamente. Entonces, la pregunta que supongo es más: ¿esto es posible en todos los navegadores modernos de hoy en día, y si no es así, qué es lo mínimo que se necesita?

Answer 1

Esto conseguirá tus botones y etiquetas 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 también podría ayudarte con esa parte, pero ahora no tengo tiempo 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>

Answer 2

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

Obtener la etiqueta cerca del botón de radio

No estoy seguro de lo que quiere decir con "al lado": 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, solo use los márgenes para separarlos. Si desea que cada uno de ellos esté en su propia línea, tiene dos opciones (a menos que desee aventurarse en float: territorio):

• Utilice <br />s para dividir las opciones y algunas 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>

• Siga el artículo de A List Apart : Formas accesibles más bonitas

Aplicación de un estilo a la etiqueta actualmente seleccionada + botón de radio

Diseñar la <label> es la razón por la cual necesitarás recurrir a Javascript. Una biblioteca como jQuery es perfecta 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>

Los ganchos de focus y blur son necesarios para que esto funcione en IE.

Answer 3

Para cualquier navegador habilitado para CSS3 puede usar un selector de hermanos adyacente para diseñar sus etiquetas

input:checked + label {
    color: white;
}  

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