Comment styliser les boutons radio et les étiquettes (css) ?

Question

Compte tenu du code ci-dessous, comment puis-je styliser les boutons radio pour qu'ils soient à côté des étiquettes et styliser l'étiquette du bouton radio sélectionné différemment des autres étiquettes ?

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

Permettez-moi également de préciser que j'utilise les styles CSS Yui comme base.Si vous ne les connaissez pas, vous pouvez les trouver ici :

• réinitialiser-fonts-grids.css
• base-min.css

Documentation pour les deux ici : Yahoo!Bibliothèque d'interface utilisateur

@pkaeding :Merci.J'ai essayé des deux choses flottantes qui avaient l'air foirées.Le bouton radio actif de style semblait réalisable avec une nomination input[type=radio]:active sur une recherche Google, mais je ne l'ai pas fait fonctionner correctement.Donc la question, je suppose, est plutôt :Est-ce possible sur tous les navigateurs modernes d'aujourd'hui, et sinon, quel est le JS minimal nécessaire ?

Answer 1

La première partie de votre question peut être résolue avec uniquement du HTML et du CSS ;vous devrez utiliser Javascript pour la deuxième partie.

Obtenir l'étiquette à côté du bouton radio

Je ne sais pas ce que tu entends par "à côté de" :sur la même ligne et à proximité, ou sur des lignes distinctes ?Si vous voulez que tous les boutons radio soient sur la même ligne, utilisez simplement les marges pour les séparer.Si vous voulez que chacun d'eux ait sa propre ligne, vous avez deux options (sauf si vous voulez vous aventurer dans float: territoire):

• Utiliser <br />s pour séparer les options et du CSS pour les aligner verticalement :

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

• Suivre Une liste à partL'article de : Des formulaires plus jolis et accessibles

Application d'un style à l'étiquette actuellement sélectionnée + bouton radio

Styliser le <label> c'est pourquoi vous devrez recourir à Javascript.Une bibliothèque comme jQueryest parfait pour ça :

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

Le focus et blur des hooks sont nécessaires pour que cela fonctionne dans IE.

Answer 2

Pour tout navigateur compatible CSS3, vous pouvez utiliser un sélecteur de frères et sœurs adjacents pour styliser vos étiquettes

input:checked + label {
    color: white;
}  

MDN tableau de compatibilité des navigateurs dit que pratiquement tous les navigateurs populaires actuels (Chrome, IE, Firefox, Safari), sur ordinateur et mobile, sont compatibles.

Answer 3

Cela permettra au moins de placer vos boutons et vos étiquettes les uns à côté des autres.Je pense que la deuxième partie ne peut pas être réalisée uniquement en CSS et nécessitera du javascript.J'ai trouvé une page qui pourrait également vous aider avec cette partie, mais je n'ai pas le temps de l'essayer pour le moment : 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>