Как настроить (css) переключатели и метки?

Ответ 1

Первая часть вашего вопроса может быть решена только с помощью HTML и CSS; вам нужно будет использовать Javascript для второй части.

Получение метки рядом с кнопкой радио

Я не уверен, что вы подразумеваете под "рядом": на той же линии и рядом, или на отдельных строках? Если вы хотите, чтобы все радиокнопки были в одной строке, просто используйте поля, чтобы раздвинуть их. Если вы хотите, чтобы каждый из них был на своей собственной линии, у вас есть два варианта (если вы не хотите рисковать на территорию float:):

• Используйте <br />s , чтобы разделить параметры отдельно, а некоторые CSS - вертикально выровнять их:

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

• Follow A List Apart статья: Более удобные формы

Применение стиля к текущей выбранной этикетке + радиокамера

Стилизация <label> - вот почему вам нужно прибегнуть к Javascript. Библиотека, подобная jQuery идеально подходит для этого:

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

Для выполнения этой работы в IE требуются крючки focus и blur.

Ответ 2

Для любого браузера с поддержкой CSS3 вы можете использовать соседний селектор для выбора сестер для стилизации ваших ярлыков

input:checked + label {
    color: white;
}  

MDN таблица совместимости браузера говорит, по существу, все текущие популярные браузеры (Chrome, IE, Firefox, Safari), как на рабочем столе, так и на рабочем столе мобильные, совместимы.

Ответ 3

По крайней мере, вы получите свои кнопки и ярлыки рядом друг с другом. Я считаю, что вторая часть не может быть выполнена только в css, и вам понадобится javascript. Я нашел страницу, которая могла бы помочь вам в этой части, но у меня нет времени прямо сейчас, чтобы попробовать: 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>