Цвет input range
как сделать из такого такой
плюс чтобы цвет и размеры не менялись
.slider < -webkit-appearance: none; width: 100%; height: 3px; background: #1B2FB2; outline: none; opacity: 0.8; -webkit-transition: .2s; transition: opacity .2s; margin: 12px 0px 5px 0px; width: 190px; >.slider:hover < opacity: 1; >.slider::-webkit-slider-thumb
Отслеживать
Мне без сахара
задан 19 янв 2021 в 7:59
Мне без сахара Мне без сахара
696 1 1 золотой знак 4 4 серебряных знака 15 15 бронзовых знаков
Тогда показывайте код «такого». вам же правку помочь сделать — нужен код, добавьте его, пожалуста, в текст вопроса.
19 янв 2021 в 8:07
@mrEvgenX Обновил свой вопрос
19 янв 2021 в 8:24
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
const slider = document.querySelector('.slider'); const progress = document.querySelector('.progress'); slider.oninput = function()< progress.style.width = `$%`; >;.wrapper < width: 190px; position: relative; z-index: 5; >.slider < -webkit-appearance: none; width: 100%; height: 3px; /* background: #1B2FB2; */ background-color: #ccc; outline: none; -webkit-transition: .2s; transition: opacity .2s; margin: 12px 0px 5px 0px; cursor: pointer; >.slider:hover < opacity: 1; >.slider::-webkit-slider-thumb < appearance: none; width: 11px; height: 11px; border-radius: 100%; background: #1B2FB2; >.progress
Отслеживать
ответ дан 19 янв 2021 в 12:53
837 4 4 серебряных знака 12 12 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать, чтобы текстовое поле при получении фокуса меняло цвет рамки?
Рамка вокруг текстового поля создается с помощью стилевого свойства border , которое добавляется к селектору INPUT . Фокусом же называется активность элемента, в данном случае, когда курсор находится внутри текстового поля и пользователь может вводить символы с клавиатуры.
За работу фокуса отвечает псевдокласс :focus , его необходимо добавить к селектору INPUT или TEXTAREA , как показано в примере 1.
Пример 1. Использование псевдокласса :focus
HTML5 CSS 2.1 IE Cr Op Sa Fx
Изменение цвета рамки Результат примера показан на рис. 1.
Рис. 1. Изменение стиля поля при получении фокуса
В данном примере вводится класс text , чтобы стиль сработал только для текстового поля, а не для кнопки.
Поскольку псевдокласс :focus не поддерживается браузером Internet Explorer до версии 8.0, для него можно воспользоваться скриптами. С этой целью поможет событие onfocus , которое срабатывает при получении фокуса и onblur , при его потере. Предварительно создаем два класса, они задают вид оформления обычного текстового поля и его же при получении фокуса. Далее к тегу добавляем onfocus=»this.className=’focus'» и onblur=»this.className=’text'» . Здесь focus и text это названия классов (пример 2).
Пример 2. Использование скриптов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Изменение цвета рамки :focus
CSS псевдокласс :focus применяется, когда элемент (такой как input формы) получает фокус. Обычно он активируется при клике мышью пользователем или при выборе элемента с использованием клавиши «tab» на клавиатуре.
/* Selects any when focused */ input:focus color: red; >
Примечание: Этот псевдокласс применяется только тогда, когда в фокусе находится сам элемент. Используйте :focus-within , если вы хотите выбрать элемент, в котором находится сфокусированный элемент.
Синтаксис
Error: could not find syntax for this item
Пример
HTML
input class="red-input" value="Я буду красным, если на меня попадёт фокус" /> input class="lime-input" value="Я буду лаймовым при фокусе" />
CSS
.red-input:focus color: red; > .lime-input:focus color: lime; >
Результат
Проблемы доступности
Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). WCAG 2.1 SC 1.4.11 Non-Text Contrast (WCAG 2.1 SC 1.4.11 Нетекстовой контраст) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.
- Доступность визуальных индикаторов фокуса: Добавьте на ваш сайт фокус! Советы по разработке полезных и удобных индикаторов фокуса
:focus
Никогда не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования WCAG 2.1 SC 1.4.11 Non-Text Contrast
- Небольшой совет: Никогда не удаляйте CSS контуры
Спецификации
| Specification |
|---|
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
- :focus-visible Экспериментальная возможность
- :focus-within
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Как изменить css для form, когда :focus на input внутри него
как сделать так, чтобы при фокусе на .header-search__input , цвета фона .header-search поменялся на синий.
upd: желательно с анимацией
upd: хотелось бы чисто на css. но если критично можно и js
Отслеживать
задан 21 янв 2021 в 14:44
midnightelf18 midnightelf18
1,872 13 13 серебряных знаков 28 28 бронзовых знаков
на css это не сделать потому, что там указывается последовательность от предка к детям, но не наоборот
21 янв 2021 в 14:48
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Можно использовать псевдо-класс :focus-within, если устаревшие браузеры не нужны. Поддержка уже во всех современных браузерах. Но есть нюанс — нельзя указать что именно внутри формы должно быть в фокусе, будет реагировать на что угодно в фокусе.
.header-search < padding: 16px; background-color: #ff000080; transition: background-color 0.5s linear; >.header-search:focus-within < background-color: #0000ff; >.header-icon.header-search__icon < width: 20px; height: 20px; >.header-search__input < border: none; /* outline: none; */ font-size: 1.2em; width: 100%; font-family: 'Montserrat', sans-serif; >.header-search__input::placeholder < color: #BDBDBD; font-family: 'Raleway', 'Montserrat', sans-serif; >.header-search
Отслеживать
ответ дан 21 янв 2021 в 15:06
user347472 user347472
отличный ответ. спасибо. но старые браузеры отбросить нельзя.
21 янв 2021 в 15:57
На CSS это не сделать потому, что там указывается последовательность от предка к детям, но не наоборот
document.querySelector('.header-search__input').addEventListener('focus', function(e)< document.querySelector('.header-search').classList.toggle("mystyle"); >, true); document.querySelector('.header-search__input').addEventListener('blur', function(e)< document.querySelector('.header-search').classList.toggle("mystyle"); >, true);.header-search < padding: 16px; background-color: #ff000080; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; >.header-icon.header-search__icon < width: 20px; height: 20px; >.header-search__input < border: none; /* outline: none; */ font-size: 1.2em; width: 100%; font-family: 'Montserrat', sans-serif; >.header-search__input::placeholder < color: #BDBDBD; font-family: 'Raleway', 'Montserrat', sans-serif; >.header-search < width: 160px; display: flex; align-items: center; >.mystyle