outline-color
CSS-свойство outline-color задаёт цвет обводки элемента.
Интерактивный пример
Синтаксис
/* Значения типа */ outline-color: #f92525; outline-color: rgb(30, 222, 121); outline-color: blue; /* Ключевое слово */ outline-color: invert; /* Глобальные значения */ outline-color: inherit; outline-color: initial; outline-color: revert; outline-color: revert-layer; outline-color: unset;
Свойство outline-color может быть иметь одно из перечисленных ниже значений.
Значения
Цвет обводки, определённый в формате типа .
Для лучшей видимости обводки, её цвет будет вычислен как противоположный цвету фона элемента. Стоит заметить, что не все браузеры могут поддерживать такую возможность, в подобном случае это значение будет восприниматься как недопустимое.
Описание
Обводка — это линия вокруг элемента за пределами рамки ( border ). В отличие от рамки элемента, обводка находится вне границ элемента и может перекрывать другое содержимое. Напротив, рамка участвует в блочной модели, чтобы расположиться на странице, не перекрыв при этом ничего другого (если, конечно, явно не сделать этого).
При определении внешнего вида обводки зачастую удобнее всего воспользоваться сокращённым свойством outline .
Проблемы, связанные с доступностью
При определении собственных стилей для состояния фокуса, как правило, предполагается изменение свойства outline . При корректировке цвета обводки нужно сохранить коэффициент контрастности между элементом и фоном на высоком уровне, чтобы люди с нарушениями зрения могли его заметить.
Коэффициент контрастности цвета определяется путём сравнения значений светлоты цвета текста и фона. Согласно руководству по обеспечению доступности веб-контента (WCAG)), коэффициент контрастности должен быть 4,5:1 для обычного текста, и 3:1 для крупного текста, например, заголовков. Под крупным текстом понимается размер от 18,66px с полужирным начертанием или более крупный, либо от 24px и крупнее.
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Формальное определение
| Начальное значение | invert для браузеров поддерживающих это, currentColor для остальных |
|---|---|
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | Для ключевого слова invert , значение — invert . Для значения цвета, если значение имеет прозрачность, соответственно, значение будет через rgba() . Если это не так, это будет rgb() . Ключевое слово transparent отображается, как rgba(0,0,0,0) . |
| Animation type | цвет |
Формальный синтаксис
outline-color =
auto | (en-US)
[ (en-US) | (en-US) ] (en-US) | (en-US)
invert
=
=
stripes( # (en-US) )
=
&& (en-US)
[ (en-US) | (en-US) ] (en-US) ? (en-US)
=
| (en-US)
Руководство по свойству outline в CSS
CSS-свойство outline позволяет вам определить область контура вокруг элемента.
Контур — это линия, которая рисуется сразу за границей элемента. Контуры обычно используются для обозначения фокуса или активного состояния таких элементов как кнопки, ссылки, поля формы и т. д.
В этом разделе мы разберем, как установить стиль, цвет и ширину контура.
Как разница между Outlines и Borders
Контур ( outline ) выглядит очень похожим на границу ( border ), но имеет отличительные особенности:
- Контуры не занимают места, всегда располагаются над элементом и могут перекрывать другие элементы на странице;
- В отличие от границ, для контура не получится установить разные цвета или стили для каждой из сторон;
- Контуры не оказывают никакого влияния на окружающие элементы, кроме наложения;
- В отличие от границ, контуры не изменяют размер или положение элемента;
- Контуры могут быть не прямоугольными, но вы не можете создавать контуры в виде окружности.
Если вы наметите контур на элементе, он займет столько же места на веб-страницах, как если бы у вас не было на нем контура. Контур перекрывает поля margins (прозрачная область за пределами границы) и окружающие элементы.
Стилизация Outline
Свойство outline-style устанавливает стиль контура элемента, например: solid , dotted и т. д.
Свойство outline-style может иметь одно из следующих значений: none , solid , dashed , dotted , double , inset , outset , groove , и ridge . Теперь давайте взглянем на следующую иллюстрацию: она дает вам представление о различиях между типами стилей контура.
Значение none не отображает контур. Значения inset , outset , groove и ridge создают 3D-подобный эффект, который зависит от значения цвета контура. Обычно этот эффект достигается созданием «тени» из двух цветов, которые немного светлее и темнее, чем цвет контура.
Давайте попробуем следующий пример и посмотрим, как это работает:
h1 < outline-style: dotted; >p
Вы должны указать outline-style , чтобы контур отображался вокруг элемента, потому что по умолчанию он имеет значение none . Ширина или толщина контура по умолчанию является medium , а цвет контура по умолчанию такой же, как и color текста.
Свойство outline-width
Свойство outline-width определяет ширину контура, добавляемого в элемент.
Посмотрим следующий пример, чтобы понять, как это на самом деле работает:
Ширина контура может быть указана с использованием любого значения, например, px , em , rem и т. д. Его также можно указать с помощью одного из трех ключевых слов: thin , medium , и thick Процентные или отрицательные значения недопустимы — как и свойство border-width .
Свойство outline-color
Свойство outline-color устанавливает цвет контура элемента.
Это свойство принимает те же значения, что и свойство color .
Следующие правила добавляют сплошной контур синего цвета вокруг абзацев.
CSS-свойство outline-width или outline-color не будут работать, если используются раздельно. Используйте свойство outline-style , чтобы сначала установить стиль контура.
Сокращенное свойство outline
CSS-свойство outline является кратким свойством для установки одного или нескольких отдельных свойств outline-style , outline-width и outline-color в одном правиле.
Давайте посмотрим на следующий пример, чтобы понять, как он работает:
Если значение для отдельного свойства outline пропущено или не указано, вместо него будет использоваться значение по умолчанию для этого свойства, если оно есть.
Например, если значение для свойства outline-color отсутствует или не указано при установке контуров, свойство color элемента будет использоваться в качестве значения для контура элемента.
В следующем примере контур будет представлять собой сплошную зеленую линию шириной 5 пикселей:
Но в случае outline-style отсутствие значения не будет отображать контуры вообще, поскольку значением по умолчанию для этого свойства является none . В следующем примере контура не будет:
Удаление контура outline у активных ссылок
Свойство outline используется для удаления контура вокруг активных ссылок.
Однако, рекомендуется применять некоторый альтернативный стиль, чтобы указать, что ссылка имеет фокус, т.к. на мобильных устройствах удобнее показывать какой элемент нажался.
Следующий пример показывает, как убрать контур у ссылок
a, a:acive, a:focus
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 3
Оценок пока нет. Поставьте оценку первым.
Похожие посты
- 17 декабря, 2019
- 3821
Руководство по свойству opacity в CSS
CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
- 16 декабря, 2019
- 2529
Руководство по таблицам в CSS
Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
- 14 декабря, 2019
- 503
Руководство по свойству margin в CSS
CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
CSS Change outline colour of button
Pretty new to CSS and i just want to change the defualt outline colour of a button. I beleive im using bootstrap So far i can change the button colour when the mouse hovers over it, and also the default text colour but not the outline Ive tried this
.btn-outline-info
the color part works but the outline-color does not Any help would be appreciated thanks
asked Apr 23, 2019 at 23:50
19 4 4 bronze badges
5 Answers 5
.btn-outline-info < color: blue; border-color: red; >.btn-outline-info:hover answered Apr 24, 2019 at 0:03
411 6 6 silver badges 12 12 bronze badges
While the other answers discuss how to change outline style, I voted for this one because border is the more correct property to be leveraging. border is presentational and tied to the box model. While outline could be used in a presentational manner, it is generally leveraged for accessibility purposes (showing focus) in the browser, so you have to be a bit more mindful about when and why you alter it from its default setting.
Apr 24, 2019 at 0:07
@haz14 did this solve your question? If so please mark is as answer or let me know if you have more questions. Thanks!
Apr 26, 2019 at 18:00
I think you need to add an outline style. For example,
outline-style: solid; outline-color: #92a8d1;
answered Apr 24, 2019 at 0:01
Jyle Villagracia Jyle Villagracia
29 5 5 bronze badges
.btn:active
:active is when the button is being hovered
answered Apr 24, 2019 at 0:01
141 1 1 silver badge 9 9 bronze badges
:active would be when the button is being actively pressed. :hover would be for hover.
Apr 24, 2019 at 0:03
This adds the outline style and color on focus:
.btn-outline-info:focus
answered Apr 24, 2019 at 0:08
Adam Gonzales Adam Gonzales
858 8 8 silver badges 12 12 bronze badges
In CSS it’s important to remember that like in HTML and javascript, the computer won’t do what you want it to do, it only does what it has to do. It doesn’t know what the CSS property outline-colour is, so it does nothing.
Do make an outline of a button, you use border-color: (color) . Or you could add a specified border using, border: 3px solid green; there are many changes you can make with borders. To have a full explanation, head to the W3 schools site. https://www.w3schools.com/cssref/pr_border.asp
And then on hover, you could do this,
button:hover
Also In the future, this kind of question doesn’t need a whole discussion on stack overflow, it can be easily researched and troubleshooted!
Как изменить цвет фокуса, когда ввод заполнен обязательным атрибутом javascript / html / css
Я работаю над HTML-формой. Я добавил необходимые элементы в некоторые из полей ввода. Поскольку я использую Bootstrap, поля ввода по умолчанию являются синими, когда фокусируются. Я установил необходимые поля ввода в красный цвет с помощью input:required:focus
input:required:focus < border: 1px solid red; outline: none; >textarea:required:focus < border: 1px solid red; outline: none; >.form-horizontal
Gijsberts 03 март 2016, в 12:40