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

StackOverflow https://stackoverflow.com/questions/43643

  •  09-06-2019
  •  | 
  •  

Вопрос

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

<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 необходим?

Это было полезно?

Решение

Первая часть вашего вопроса может быть решена с помощью просто 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's таблица совместимости браузера говорит, что практически все современные популярные браузеры (Chrome, IE, Firefox, Safari), как на настольных компьютерах, так и на мобильных устройствах, совместимы.

По крайней мере, так ваши кнопки и надписи будут располагаться рядом друг с другом.Я считаю, что вторая часть не может быть выполнена только на 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top