Как мне оформить (css) радио кнопки и метки? - PullRequest
Новая
       27

Как мне оформить (css) радио кнопки и метки?

31 голосов
/ 04 сентября 2008

Учитывая приведенный ниже код, как настроить стиль переключателей таким образом, чтобы они были рядом с ярлыками, а стиль выбранных переключателей - иначе, чем другие ярлыки? 

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

Также позвольте мне заявить, что в качестве основы я использую стили yui css. Если вы не знакомы с ними, их можно найти здесь:

Документация для них обоих здесь: Yahoo! Библиотека пользовательского интерфейса

@ pkaeding: Спасибо. Я попробовал некоторые плавающие вещи, которые выглядели испорченными. Стильная активная радиокнопка казалась выполнимой при некотором вводе [type = radio]: active nomination в поиске Google, но я не смог заставить его работать должным образом. Поэтому вопрос, который я предполагаю, заключается в следующем: возможно ли это во всех современных современных браузерах, и если нет, то какой минимальный JS необходим?

Ответы [ 3 ]

33 голосов
/ 04 сентября 2008

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

Для работы в IE требуются хуки focus и blur.

27 голосов
/ 04 сентября 2008

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

input:checked + label {
    color: white;
}

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

5 голосов
/ 04 сентября 2008

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