Jak stylować (css) przyciski radiowe i etykiety?

Biorąc pod uwagę poniższy kod, jak stylować przyciski radiowe, aby znajdowały się obok etykiet i stylować Etykietę wybranego przycisku radiowego inaczej niż inne etykiety?

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

Pozwolę sobie również stwierdzić, że używam stylów css Yui jako bazy. Jeśli nie jesteś z nimi spokrewniony, można je znaleźć tutaj:

Dokumentacja dla nich obu tutaj: Yahoo! UI Biblioteka

@PKA: dzięki. Próbowałem obu rzeczy, które wyglądały na popaprane. Przycisk aktywnej opcji stylizacji wydawał się wykonalny z pewnym wejściem[type = radio]: aktywna nominacja w wyszukiwarce google, ale nie udało mi się go poprawnie uruchomić. Więc pytanie jest chyba bardziej: czy jest to możliwe we wszystkich dzisiejszych nowoczesnych przeglądarkach, a jeśli nie, to co jest minimalne js potrzebne?

Author: Nhan, 2008-09-04
Source

3 answers

Pierwsza część twojego pytania może być rozwiązana za pomocą HTML & CSS; w drugiej części będziesz musiał użyć Javascript.

Uzyskanie etykiety w pobliżu przycisku radiowego

Nie jestem pewien, co masz na myśli przez "obok": na tej samej linii i w pobliżu, czy na oddzielnych liniach? Jeśli chcesz, aby wszystkie przyciski radiowe były w tej samej linii, po prostu użyj marginesów, aby je rozdzielić. Jeśli chcesz, aby każdy z nich miał swoją własną linię, masz dwie opcje (chyba że chcesz zaryzykować float: "terytorium": {]}

  • Użyj <br />s , aby podzielić opcje i niektóre CSS, aby wyrównać je w pionie: 
<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>

Stosowanie stylu do aktualnie wybranej etykiety + przycisk radiowy

Stylizacja <label> dlatego musisz uciekać się do Javascript. Biblioteka jak jQuery jest do tego idealny: 

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

Haki focus i blur są potrzebne do ta praca w IE.

 33
Author: Chris Zwiryk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-04 15:49:41

Dla każdej przeglądarki z obsługą CSS3 możesz użyć sąsiedniego selektora rodzeństwa do stylizacji etykiet 

input:checked + label {
    color: white;
}

Tabela zgodności przeglądarki MDN mówi zasadniczo wszystkie obecne, popularne przeglądarki (Chrome, IE, Firefox, Safari), zarówno na komputerach, jak i urządzeniach mobilnych, są kompatybilne.

 27
Author: Henrik Gustafsson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-07 20:54:19

Dzięki temu Twoje przyciski i etykiety będą przynajmniej obok siebie. Wierzę, że drugiej części nie można zrobić w samym css i będzie potrzebował javascript. Znalazłem stronę, która może Ci również pomóc w tej części, ale nie mam teraz czasu, aby ją wypróbować: 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>
 5
Author: pkaeding,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-04 13:03:54