Wie tun ich Stil (css) radio-buttons und labels?

Question

Angesichts der code ist unten, wie tun ich Stil der radio-buttons, werden neben den von Etiketten und Stil das Etikett des ausgewählten radio-button-anders als andere labels?

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

Auch lassen Sie mich, dass ich die yui css-styles als Basis.Wenn Sie sind nicht familir mit Ihnen, können Sie hier gefunden werden:

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

Dokumentation für Sie beide hier : Yahoo!UI-Bibliothek

@pkaeding:Vielen Dank.Ich habe versucht, einige schwimmende beide Ding, das sah einfach Durcheinander.Das styling active radio-Taste Schienen machbar mit ein bisschen input[type=radio]:active Nominierung auf einem google-Suche, aber ich habe nicht bekommen es richtig zu arbeiten.So die Frage, die ich denke, ist mehr:Ist das möglich auf alle heutigen modernen Browsern, und wenn nicht, was ist die minimale JS benötigt?

Answer 1

Den ersten Teil deiner Frage kann gelöst werden, die nur mit HTML & CSS;Sie müssen Javascript verwenden, für den zweiten Teil.

Immer das Etikett in der Nähe der Radio-Taste

Ich bin mir nicht sicher, was meinen Sie mit "neben":auf der gleichen Linie und in der Nähe von oder auf separaten Leitungen?Wenn Sie möchten, dass alle radio-buttons, der auf der gleichen Zeile, verwenden Sie einfach die Margen drücken Sie auseinander.Wenn Sie möchten, dass jede von Ihnen auf Ihre eigene Linie, Sie haben zwei Optionen (es sei denn, Sie möchten es Wagen float: Gebiet):

• Verwenden <br />s Aufteilung der Optionen und abgesehen von einigen CSS vertikal ausrichten:

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

• Folgen A List Apart's Artikel: Schöner Zugänglichen Formen

Zum anwenden eines formats auf die Aktuell Ausgewählte Beschriftung + Radio-Taste

Styling <label> ist der Grund, warum Sie müssen resort auf Javascript.Eine Bibliothek wie jQuery perfekt dafür:

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

Die focus und blur Haken werden benötigt, um diese Arbeit zu machen, die in IE.

Answer 2

Für alle CSS3-fähiger browser Sie verwenden können eine adjacent sibling selector für das styling Ihres labels

input:checked + label {
    color: white;
}  

MDN s browser-Kompatibilität-Tabelle sagt im wesentlichen alle aktuellen, gängigen Browser (Chrome, IE, Firefox, Safari), auf desktop und mobile, kompatibel sind.

Answer 3

Diese erhalten Ihre Knöpfe und Etiketten nebeneinander, mindestens.Ich glaube, dass der zweite Teil nicht getan werden kann in css allein, und benötigt javascript.Ich fand eine Seite, dass könnte Ihnen helfen, mit diesem Teil, aber ich habe nicht die Zeit jetzt, um es auszuprobieren: 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>