Come posso definire lo stile (css) dei pulsanti di opzione e delle etichette?

Question

Dato il codice seguente, come posso modellare i pulsanti di opzione in modo che siano accanto alle etichette e modellare l'etichetta del pulsante di opzione selezionato in modo diverso rispetto alle altre etichette?

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

Vorrei anche precisare che utilizzo gli stili CSS yui come base.Se non li conosci, li puoi trovare qui:

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

Documentazione per entrambi qui: Yahoo!Libreria dell'interfaccia utente

@pkaeding:Grazie.Ho provato a far galleggiare entrambe le cose che sembravano semplicemente incasinate.Il pulsante di opzione attivo per lo styling sembrava fattibile con qualche input[type=radio]:active nomination su una ricerca su Google, ma non sono riuscito a farlo funzionare correttamente.Quindi la domanda immagino sia più:Ciò è possibile su tutti i browser moderni di oggi e, in caso contrario, qual è il JS minimo necessario?

Answer 1

La prima parte della tua domanda può essere risolta solo con HTML e CSS;dovrai utilizzare Javascript per la seconda parte.

Ottenere l'etichetta vicino al pulsante di opzione

Non sono sicuro di cosa intendi con "accanto a":sulla stessa linea e vicine o su linee separate?Se vuoi che tutti i pulsanti di opzione siano sulla stessa riga, usa semplicemente i margini per allontanarli.Se li vuoi ciascuno sulla propria linea, hai due opzioni (a meno che tu non voglia avventurarti in float: territorio):

• Utilizzo <br />s per dividere le opzioni e alcuni CSS per allinearle 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>

• Seguire Una lista a partel'articolo di: Forme accessibili più belle

Applicazione di uno stile all'etichetta + pulsante di opzione attualmente selezionati

Disegnare il <label> ecco perché dovrai ricorrere a Javascript.Una biblioteca come jQueryè perfetto per questo:

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

IL focus E blur sono necessari hook per farlo funzionare in IE.

Answer 2

Per qualsiasi browser abilitato per CSS3 è possibile utilizzare un file selezionatore del fratello adiacente per modellare le tue etichette

input:checked + label {
    color: white;
}  

MDN tabella di compatibilità del browser afferma che essenzialmente tutti i browser più diffusi e attuali (Chrome, IE, Firefox, Safari), sia su desktop che su dispositivi mobili, sono compatibili.

Answer 3

In questo modo, almeno i pulsanti e le etichette saranno uno accanto all'altro.Credo che la seconda parte non possa essere eseguita solo in CSS e avrà bisogno di Javascript.Ho trovato una pagina che potrebbe aiutarti anche con quella parte, ma non ho tempo adesso per provarla: 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>