Como faço estilo (css) botões de rádio e rótulos?

Question

Dado o código abaixo, como faço o estilo botões de rádio para ser o próximo a rótulos e estilo o rótulo do botão de rádio selecionado de forma diferente do que os outros rótulos?

<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>

Também deixe-me dizer que eu uso o yui estilos css como base.Se você não familir com eles, podem ser encontradas aqui:

• reset-fontes-redes.css
• base-min.css

Documentação para ambos aqui : O Yahoo!Biblioteca de INTERFACE

@pkaeding:Obrigado.Eu tentei alguns flutuante tanto de coisa que só olhou confuso.O estilo ativo botão de rádio parecia ser factível com alguns input[type=radio]:active a nomeação em uma pesquisa no google, mas eu não funcionar corretamente.Então a questão que eu acho que é mais:Isso é possível em todos os atuais navegadores modernos, e se não, qual é o mínimo JS necessário?

Answer 1

A primeira parte da sua pergunta pode ser resolvido apenas com HTML e CSS;você vai precisar usar Javascript para a segunda parte.

Recebendo o Rótulo de Perto o Botão de Rádio

Eu não tenho certeza do que você quer dizer por "próximo":na mesma linha e perto de, ou em linhas separadas?Se desejar que todos os botões de rádio na mesma linha, basta usar margens para empurrá-los para além.Se você deseja a cada um deles em sua própria linha, você tem duas opções (a menos que você queira se aventurar em float: território):

• Utilização <br />s para dividir as opções de apart e alguns CSS para alinhar verticalmente-los:

<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 Uma Lista De Apart's abaixo: Mais Bonita Formas Acessíveis

Aplicar um Estilo Atualmente Selecionado Rótulo + Botão de Rádio

O estilo <label> por isso, você precisará recorrer ao Javascript.Uma biblioteca como jQuery é perfeito para isso:

<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>

O focus e blur ganchos são necessários para fazer este trabalho no IE.

Answer 2

Para qualquer CSS3 habilitados para navegador, você pode usar um adjacente irmão seletor para o estilo do seu etiquetas

input:checked + label {
    color: white;
}  

MDN do tabela de compatibilidade de navegador diz essencialmente todos os atuais e populares navegadores (Chrome, IE, Firefox, Safari), no desktop e celular, são compatíveis.

Answer 3

Isto irá obter os seus botões e etiquetas ao lado uns dos outros, pelo menos.Eu acredito que a segunda parte não pode ser feito em apenas css, e vai precisar de javascript.Eu encontrei uma página que pode ajudar você com essa parte, mas eu não tenho tempo agora para experimentá-lo: 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>