спросил
Изменено 5 лет, 4 месяца назад
Просмотрено 8к раз
У меня есть аккордеон CSS, и я пытаюсь изменить цвет фона активной метки. Я пытался использовать это, но не смог заставить его работать. Есть что-то, что мне не хватает?
метка ул.гармошки + input[type='radio']:checked {
цвет фона: #000;
}
HTML:
Содержание 1 бла-бла-бла-бла
Содержание 2 бла-бла-бла-бла
А вот мой CSS:
/* Очистка стилей списков */
ул.
аккордеон {
стиль списка: нет;
маржа: 0;
заполнение: 0;
}
/* Скрыть переключатели */
/* Это то, что позволяет нам переключать панели содержимого */
ul.accordion label + input[type='radio'] {
дисплей: нет;
}
/* Присвойте каждой панели содержимого несколько стилей */
ул.аккордеон ли {
цвет фона: #fff;
нижняя граница: 1 пиксель сплошной #DDDDDD;
}
ул.аккордеон ул {
верхнее поле: -15px;
}
/* Сделать главную вкладку более кликабельной */
ул.аккордеонная этикетка {
цвет фона: #666666;
цвет: #FFFFFF;
дисплей: блок;
отступ: 10 пикселей;
поле: -5px -10px;
размер шрифта: 16px;
вес шрифта: 700;
}
/* Настройте div, который будет отображаться и скрываться */
ul.accordion div.content {
переполнение: скрыто;
отступ: 0 10px;
дисплей: нет;
}
/* Показывать поля содержимого, когда переключатели отмечены флажком */
метка ul.accordion + input[type='radio']:checked + div.content {
дисплей: блок;
}
http://jsfiddle.net/hvhL5ouk/2/
Поскольку в CSS нет предыдущего селектора, вам придется переместить элемент 11 input22 и используйте соседний родственный ( + ) селектор, чтобы выбрать метку , когда ввод равен :checked .
аккордеон {
стиль списка: нет;
маржа: 0;
заполнение: 0;
}
/* Скрыть переключатели */
/* Это то, что позволяет нам переключать панели содержимого */
ul.accordion label + input[type='radio'] {
дисплей: нет;
}
/* Присвойте каждой панели содержимого несколько стилей */
ул.аккордеон ли {
цвет фона: #fff;
нижняя граница: 1 пиксель сплошной #DDDDDD;
}
ул.аккордеон ул {
верхнее поле: -15px;
}
/* Сделать главную вкладку более кликабельной */
ул.аккордеонная этикетка {
цвет фона: #666666;
цвет: #FFFFFF;
дисплей: блок;
отступ: 10 пикселей;
поле: -5px -10px;
размер шрифта: 16px;
вес шрифта: 700;
}
/* Настройте div, который будет отображаться и скрываться */
ul.accordion div.content {
переполнение: скрыто;
отступ: 0 10px;
дисплей: нет;
}
/* Показывать поля содержимого, когда переключатели отмечены флажком */
метка ul.accordion + input[type='radio']:checked + div.content {
дисплей: блок;
}
input[type="radio"]:checked + label {
фон: #000;
}
Обновленная скрипка
/* Очистить стили списков */
ул.аккордеон {
стиль списка: нет;
маржа: 0;
заполнение: 0;
}
/* Скрыть переключатели */
/* Это то, что позволяет нам переключать панели содержимого */
ul.accordion input[type='радио'] {
дисплей: нет;
}
/* Присвойте каждой панели содержимого несколько стилей */
ул.аккордеон ли {
цвет фона: #fff;
нижняя граница: 1 пиксель сплошной #DDDDDD;
}
/* Сделать главную вкладку более кликабельной */
ул.аккордеонная этикетка {
цвет фона: #666666;
цвет: #FFFFFF;
дисплей: блок;
отступ: 10 пикселей;
размер шрифта: 16px;
вес шрифта: 700;
}
/* Настройте div, который будет отображаться и скрываться */
ul.accordion div.content {
переполнение: скрыто;
отступ: 0 20 пикселей;
дисплей: нет;
}
/* Показывать поля содержимого, когда переключатели отмечены флажком */
ul.accordion input[type='radio']:checked + label + div. content {
дисплей: блок;
}
input[type="radio"]:checked + label {
фон: #000;
}
тело {
маржа: 0;
} <ул>
Содержание 1 бла-бла-бла-бла
1
Дело не в том, что селектор :checked не работает (это прекрасно), ваш CSS не делает то, что вы думаете:
ul.accordion label + input[type='radio']: проверил
Это без выбора метки . Это выбор проверенного переключателя, который является непосредственным братом метки (сразу после). На самом деле вам нужно обратное, но на самом деле это невозможно в CSS (без редактирования вашей разметки).
Вам придется переключить ярлык и ввести в HTML, тогда ваш CSS будет работать:
Если вы хотите сохранить метку слева от переключателя, просто добавьте
ул.гармошка + input[type='radio']:checked {
цвет фона: #000;
}
Этот код буквально означает
найди мне все входные радио которые проверены и следуй ул.аккордеон label, затем установите цвет фона на # 000
Вам придется обратить этот процесс, чтобы получить то, что вы хотите. На данный момент в CSS это невозможно.
Единственный способ обойти это, который приходит мне на ум, — это изменить структуру вашей DOM, используя JS или псевдокласс :before с z-index , который создаст слой на активной вкладке.
Это возможно только с помощью CSS.
Используя свойство display:flex + команда , чтобы поменять местами метку , чтобы получить желаемые результаты.
Пример: https://codepen.io/tronghiep92/pen/BdrobR
Вернитесь к разметке HTML.
Содержание 1 бла-бла-бла-бла
изменить на:
Содержание 1 бла-бла-бла-бла
и исправьте порядок/положение с помощью CSS:
li {
дисплей: гибкий;
}
этикетка {
порядок: 0;
}
вход{
порядок: 1;
}
div.content {
порядок: 2;
}
ввод: проверено ~ * {
/* все, что угодно, с меткой и div.content*/
}
Еще несколько советов: я всегда использую тег wrap , потому что нажмите , затем — это фокус , проверено .
Как и в приведенном выше примере, нажмите значок поиска, затем ввод фокус.
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Электронная почта
Требуется, но никогда не отображается
Электронная почта
Требуется, но не отображается
Чтобы применить стиль CSS к метке отмеченного переключателя или отмеченного флажка, вы можете использовать селектор псевдокласса CSS :checked с соседним родственным комбинатором (+).
first_element + second_element {стиль} Для радиокнопки можно использовать селектор input[type="radio"]:checked + label , который соответствует метке, следующей сразу за проверенным вводом типа радио.
input[type=»radio»]:checked + label { начертание шрифта: полужирный; } |
1 2 3 4 5 6 7 8 | Выберите предпочтительный способ связи:
|
Редактировать в JSFiddle
Флажок Для флажка можно использовать селектор input[type="checkbox"]:checked + label , который соответствует метке, следующей сразу за проверенным вводом флажок типа.
input[type=»checkbox»]:checked + label { начертание шрифта: полужирный; } |
1 2 3 4 5 6 7 8 10 500025 | Выберите предпочтительный способ связи:
|
Редактировать в JSFiddle
В качестве альтернативы можно использовать :checked + label , который соответствует меткам переключателя и отмеченного флажка.
:checked + label { начертание шрифта: полужирный; } |
Для раскрывающегося списка можно использовать кнопку 9.0169 option: проверенный селектор , который соответствует выбранным элементам option.
option:checked { начертание шрифта: полужирный; } |
1 2 3 4 5 6 7 |
|
Редактировать в JSFiddle
Вот и все, что касается селектора CSS для отмеченной метки переключателя с использованием JavaScript и Query.