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

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

Первую часть вашего вопроса можно решить с помощью только 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>

• Следите за статьей Список отдельно: Более красивые доступные формы

Применение стиля к выбранной в данный момент метке + переключатель

Стилизация <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>

Перехватчики focus и blur необходимы для работы в IE.

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

input:checked + label {
    color: white;
}  

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