Вопрос или проблема
У меня есть выпадающий список с 2 вариантами. В области выбора варианты:
зеленый для 1
красный для 2
Я смог задать зеленый также как цвет для предустановленного варианта.
Теперь я хотел бы изменить это в зависимости от выбранного варианта.
Это означает, что если кто-то выбрал 1 в качестве предустановленного варианта, цвет появляющегося содержимого отображаемого выпадающего списка должен быть зеленым, а если кто-то выбрал 2, цвет появляющегося содержимого отображаемого выпадающего списка должен быть красным.
https://jsfiddle.net/aqd7web5/2/
Всё это только с помощью CSS, если возможно.
Спасибо заранее
Вы можете достичь этого, добавив событие onchange к вашему тегу select.
Попробуйте код ниже:
HTML:
<select id=”derselect” onchange=”this.className=this.options[this.selectedIndex].className”
class=”green”>
<option class=”green”>Тест 1
<option class=”red”>Тест 2
</select>
А ваш CSS:
.green { color:green}
.red {color:red}
🙂
Вам может понадобиться использовать jQuery для упрощения этого, например:
<Select id="select_opt">
<Option value="green">первый</option>
<Option value="red"> второй </option>
</Select>
Затем, когда ваш документ готов
$('#select_opt').on('change', 'option', function{
$(this).attr('style', 'text-color:' + $(this).val());
});
Ответ или решение
Для того чтобы установить разные цвета в выпадающем списке в зависимости от выбора пользователя с использованием только CSS, нужно учитывать ограничения самого HTML-элемента select и его опций. Мы можем использовать CSS-свойства и атрибуты HTML, чтобы минимизировать использование JavaScript. Однако, стоит отметить, что полное изменение цвета текста зависимо от выбора в выпадающем списке исключительно с использованием CSS является сложной задачей, так как непосредственно взаимодействовать с состоянием элемента select с помощью CSS нельзя.
Тем не менее, можно использовать подход с JavaScript для динамического изменения класса элемента select, что позволит использовать CSS для изменения цвета текста. Ниже приводится полная реализация, включая разделы HTML, CSS и JavaScript.
HTML
<select id="colorSelect" class="green" onchange="changeColor(this)">
<option class="green">Зеленый</option>
<option class="red">Красный</option>
</select>CSS
.green {
color: green;
}
.red {
color: red;
}JavaScript
function changeColor(selectElement) {
selectElement.className = selectElement.options[selectElement.selectedIndex].className;
}Объяснение
-
HTML-разметка: У нас есть элемент
<select>с двумя опциями: "Зеленый" и "Красный". Каждая опция имеет соответствующие CSS классы (greenилиred). -
CSS: Классы, которые мы добавили, определяют цвет текста для элемента select. Если выбран класс
green, текст будет зеленым; еслиred— красным. -
JavaScript: Функция
changeColorсрабатывает при изменении выбранной опции. Она обновляет класс для элемента select в зависимости от выбранной опции. Это позволяет применять соответствующий цвет в зависимости от выбора пользователя.
Примечания
- Использование JavaScript здесь минимально, и оно требуется только для изменения класса элемента. Существует ограниченность в возможностях CSS в данной ситуации, поскольку нельзя динамически изменять стиль элемента select на основании выбранной опции, не прибегая к JavaScript.
- Вы можете улучшить обработку событий с помощью jQuery, однако, учитывая ваш запрос об использовании чистого JavaScript, представленное решение является оптимальным и отвечает заданным требованиям.
Заключение
Итак, при выборе опции в выпадающем списке будет соответствовать определенный цвет текста. Это решение является простым и эффективным для управления базовыми состояниями в пользовательском интерфейсе. При необходимости дальнейшей кастомизации вы можете добавить больше опций с различными классами цветов или использовать другие методы стилизации, учитывая ограничения элементов формы в HTML.