Nano Hash - криптовалюты, майнинг, программирование

Как использовать псевдокласс для изменения цвета фона выбранных элементов в списке множественного выбора

У меня есть список множественного выбора. Я пытаюсь выбрать что-либо, чтобы иметь цвет фона, и все, что выбрано, чтобы его не было.

форма> подано> выберите> опция, которую я назвал form id=opti, которую я пробовал

#opti option:focus {
    background-color: #ffd56f;
}
#opti option:active {
    background-color: #ffd56f;
}
#opti option:hover {
    background-color: orange;
}

наведение работает, но меня интересует изменение цвета фона выбранных элементов опции при выборе, а не только при наведении.

Если в css нет возможности для этого, что является хорошей альтернативой (не давая мне ссылку на готовое стороннее программное обеспечение), возможно, функция javascript, которая запускается при изменении выбора элемента или когда один выбран, а другой выбран .

Любая помощь будет отличной

css pseudo-element html-select
08.06.2019

  • я пробовал :проверил не получилось. Я забыл упомянуть, что 08.06.2019

Ответы:


1

Вы можете использовать псевдокласс :checked. (Подробнее о псевдоклассе :checked)

Но браузеры и операционные системы часто обрабатывают элементы select/option по отдельности и не допускают некоторые или все стили.

Например, в Firefox (macOS) background-color из стиля игнорируется. Но вы можете использовать box-shadow для изменения цвета фона.

Но чтобы на вашей странице были полностью настроенные элементы выбора, которые выглядят и ведут себя одинаково во всех браузерах, вы также можете использовать библиотеку замены, такую ​​как Выбрать2.

select option:hover {
  background-color: yellow;
}
select option:checked {
  background-color: red; /* NOT working on Firefox (macOS) */
  box-shadow: 0 0 0 10px orange inset; /* working on Firefox (macOS) */
}
<select multiple>
  <option value="1">Lorem</option>
  <option value="2">Ipsum</option>
  <option value="3">Stack</option>
  <option value="4">Overflow</option>
</select>

08.06.2019
  • box-shadow: 0 0 0 оранжевая вставка 10px; /* работа в Firefox (macOS) */ изменила Chrome! Благодарность 08.06.2019
  • просто есть еще одно применение. используя цвет: красный; или вес шрифта: полужирный; не изменяет цвет и вес текста отмеченных элементов. Вы знаете, как я могу это исправить? 08.06.2019
  • -webkit-text-fill-color: красный; 08.06.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..