Как изменить цвет фона «контрольной группы»

0

Я хочу изменить цвет фона для каждой отдельной кнопки в моей "контрольной группе". Я знаю, как изменить цвет фона, если кнопка не нажата: (Этот первый кусок css работает!)

.ui-page-theme-a .ui-btn.ui-btn{
    background-color: #123456;
}

Но следующий код не работает, чтобы изменить цвет, если кнопка активна:

.ui-page-theme-a .ui-btn.ui-btn-active{
    background-color: #123456;
}

И вот мой полный html-код:

<html>

<head>
    <meta name=viewport content="user-scalable=no,width=device-width" />
    <link href="css/colorpicker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="js/colorpicker.js"></script>
    <script>
        onStart();
    </script>
</head>

<body>
    <div class="container">
        <div id="preview" class="preview"></div>
        <p id="output"></p>

        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Horizontal controlgroup, checkbox:</legend>
            <input type="checkbox" id="modul1">
            <label for="modul1">Modul 1</label>
            <input type="checkbox" id="modul2">
            <label for="modul2">Modul 2</label>
            <input type="checkbox" id="modul3">
            <label for="modul3">Modul 3</label>
            <input type="checkbox" id="modul4">
            <label for="modul4">Modul 4</label>
            <input type="checkbox" id="modul5">
            <label for="modul5">Modul 5</label>
            <input type="checkbox" id="modul6">
            <label for="modul6">Modul 6</label>
            <input type="checkbox" id="modul7">
            <label for="modul7">Modul 7</label>
            <input type="checkbox" id="modul8">
            <label for="modul8">Modul 8</label>
        </fieldset>

        <div class="colorpicker" style="display:none">
            <canvas id="picker" var="2" width="300" height="300"></canvas>
        </div>
    </div>
</body>

</html>

Вот код для вас: http://jsfiddle.net/DCtEF/

  • 1
    Ваш CSS не соответствует выводу HTML. Ни один из ваших HTML не имеет класса "ui-btn" или "ui-btn-active".
  • 0
    на самом деле эти классы существуют, я думаю, jquery генерирует их ... как я уже говорил, первый кусок кода работает
Показать ещё 4 комментария
Теги:
jquery-mobile

2 ответа

2
Лучший ответ

Гром, ваше исправление действительно просто, есть два возможных способа исправить проблему, один (второй вариант), вероятно, более желателен.

Настоящая проблема здесь связана с приоритетом. Эта таблица стилей: "http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" - это то, что превосходит ваши стили. Вероятно, у вас есть своя таблица стилей, связанная в голове, а затем под ней.

Быстрый и простой способ - просто добавить !important в конце свойства css. http://jsfiddle.net/SaDrZ/

background-color: orange !important;

Это может быть отвратительным, обычно лучше избегать использования! Важно, когда это возможно.

Более желательным способом является просто убедиться, что вы связываете приведенную выше таблицу стилей перед вашей собственной таблицей стилей. Как ниже...

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="mystyles.css" />
Поделиться
  • 0
    Спасибо, оба решения работают отлично :)
  • 0
    Dev tools - спаситель таких вещей. Осмотрев элемент, вы можете быстро увидеть, что стиль по умолчанию, применяемый CSS-файлом jquery mobile, переопределяет ваш собственный стиль. Оттуда легко диагностировать, как исправить, если вы знаете реальную проблему. ;)
0

Я не проверял ваш код. Но я бы это сделал первым: .ui-page-theme-a.ui-btn.ui-btn-active -active не является селектором css для активного поведения. рассмотрите .ui-page-theme-a.ui-btn.ui-btn:active

Поделиться
  • 0
    С чего бы это .ui-btn.ui-btn ??? Тот факт, что два класса сталкиваются друг с другом, указывает на то, что это два класса, применяемые к одному и тому же элементу. Следовательно, .ui-btn-active - это отдельный класс, а не опечатка для псевдо-селектора.
  • 0
    Я уже пробовал это, оно работает, пока вы удерживаете кнопку мыши нажатой. Но это не соответствующий оператор CSS для "активированного?" состояние кнопки.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню