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

Question

Étant donné que le code ci-dessous, comment le style de la radio boutons à côté de la étiquettes et le style de l'étiquette du bouton radio sélectionné de manière différente que les autres labels?

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

Aussi permettez-moi de préciser que j'utilise le yui styles css de base. Si vous n'êtes pas familir avec eux, ils peuvent être trouvés ici:

• reset-polices-grilles.css
• base-min.css

La Documentation ici : Yahoo! Bibliothèque d'INTERFACE utilisateur

@pkaeding: Merci. J'ai essayé un peu flottant à la fois la chose qui avait foiré. Le style de bouton radio actif semble être faisable avec un input[type=radio]:active candidature sur une recherche google, mais je n'ai pas l'obtenir pour fonctionner correctement. Donc la question que je suppose que c'est plus: Est-ce possible sur tous aujourd'hui les navigateurs modernes, et si non, quel est le minimum de JS nécessaires?

Answer 1

La première partie de votre question peuvent être résolus avec le HTML et CSS, vous aurez besoin d'utiliser le Javascript pour la deuxième partie.

L'obtention de l'Étiquette à Proximité du Bouton Radio

Je ne suis pas sûr de ce que tu veux dire par "à côté": sur la même ligne et à proximité, ou sur des lignes distinctes? Si vous voulez que tous les boutons de la radio sur la même ligne, il suffit d'utiliser les marges de les pousser dehors. Si vous voulez que chacun d'eux sur leur propre ligne, vous avez deux options (sauf si vous souhaitez vous aventurer dans float: du territoire):

• Utiliser <br />s de diviser les options en dehors et un peu de CSS pour aligner verticalement entre eux:

<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 à Part, s'article: Jolies Formes Accessibles

Application d'un Style à l'Étiquette Sélectionnée Actuellement + Bouton Radio

Le style de l' <label> est pourquoi vous aurez besoin de recourir à du Javascript. Une librairie comme jQuery est parfait pour cela:

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

L' focus et blur crochets sont nécessaires pour faire ce travail dans IE.

Answer 2

Pour tout navigateur compatible CSS3, vous devriez pouvoir vous en tirer.

 input:checked + label {
    color: white;
}
 

pour coiffer vos étiquettes. Malheureusement, cela exclut probablement certains des navigateurs les plus populaires ...

Answer 3

Vos boutons et vos étiquettes seront côte à côte, au moins. Je crois que la deuxième partie ne peut pas être faite en css seule, et aura besoin de javascript. J'ai trouvé une page qui pourrait vous aider avec cette partie aussi, mais je n'ai pas le temps de l'essayer: 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 4

J'aime beaucoup cet article: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ . Je pense que cela fournit une explication détaillée et des exemples. J'espère que ça aide.