outline-color в CSS

outline-color

Браузер Internet Эксплорер Нетscape Опера Safari Файер фох
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)2, CSS (ЦСС)2.1
Значение по умолчанию invert
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.ШТМЛ#propdef-outline-color

Описание

Задает цвет внешней границы элемента. В отличие от линии, задаваемой через border , линия через атрибут outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Синтаксис

outline-color: invert | цвет

Значения

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат примера показан на рис. 1.

Рис. 1. Использование атрибута outline-color

outline-color

Свойство CSS outline-color используется для указания цвета контура вокруг элемента.

Вместо свойства outline-color можно применять outline. Также в описании этого свойства вы можете прочитать об отличиях рамки (border) от контура.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства outline-color является указание цвета контура одним из следующих способов.

  • Имя цвета — многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
  • invert — цвет контура соответствует инвертированному цвету пикселей, которые находятся под ним либо цвету текста (color) элемента. Спецификацией разрешены оба варианта, поэтому разные браузеры по-разному понимают это значение.
  • inherit — наследует значение outline-color от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: invert.

Синтаксис

Пример CSS: использование outline-color

Результат. Использование свойства CSS outline-color в браузере Opera.

В данном примере outline-color можно было и не указывать, так как invert — это значение по умолчанию. Как видите, цвет контура меняется в зависимости от того, какой цвет пикселей под ним.

outline-color

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE8.0+ + + + +

Пример

Прописываем цвет для внешней границы в-точку:

Описание и использование

Свойство outline-color задает цвет внешней границы элемента.

Илон Маск рекомендует:  Что такое код printer_select_brush

Примечание: Всегда прописывайте свойство outline-style перед свойством outline-color. У элемента должна быть внешняя граница, прежде чем менять ее цвет.

Outline-color в CSS

New! My 44-page ebook «CSS in 44 minutes» is out! ��

# outline-color

Defines the color of the element’s outlines.

default outline-color: transparent;

Applies a transparent color to the outlines. The outlines will still take up the space defined by the outline-width value.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

outline-color: rgb(50, 115, 220);

You can use rgb() color codes:

  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between and 255.

outline-color: rgba(50, 115, 220, 0.3);

You can use rgba() color codes:

  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero (transparent) to one 1 (opaque).

outline-color: hsl(14, 100%, 53%);

You can use hsl() color codes:

  • the first value is for hue and can go from to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%

outline-color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero (transparent) to one 1 (opaque).

CSS: outline-color property

This CSS tutorial explains how to use the CSS property called outline-color with syntax and examples.

Description

The CSS outline-color property defines the outline color of an element, which is a line that is drawn outside the border edge of an element.

Syntax

The syntax for the outline-color CSS property is:

Parameters or Arguments

The foreground color of the element’s text content. It can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the outline-color
div
rgb() RGB representation of the outline-color
div
name Name of the outline-color (ie: red, blue, black, white)
div
invert Inverts the color of the background
div
inherit Element will inherit the outline-color from its parent element
div
  • The value in the CSS outline-color property can be expressed as a hexadecimal value, rgb value, or as a named color.
  • The outline-color value can be expressed in hexadecimal values such as #FFFFFF, #000000, and #FF0000.
  • The outline-color value can be expressed using rgb such as rgb(255,255,255), rgb(0,0,0), and rgb(255,0,0).
  • The outline-color value can be expressed as named colors such as white, black, and red.
  • See also the outline-style,outline-width, and outline properties.
  • Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.

Browser Compatibility

The CSS outline-color property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the outline-color property below, exploring examples of how to use this property in CSS.

Using Hexadecimal

Let’s look at a CSS outline-color example where we have provided a hexadecimal value for the outline-color.

In this CSS outline-color example, we have provided a hexadecimal value of #000000 which would display a black outline around the text within the

Using RGB

We can also provide the outline-color value using rgb.

In this CSS outline-color example, rgb(0,0,0) would also display a black outline around for the

Using Color Name

Let’s look at a CSS outline-color example where we have provided the value as a named color.

In this CSS outline-color example, we have provided the name «black» which would also create a black outline around the

Color Names

Below is a list of the color names to choose from:

Свойство CSS outline-color

p
<
outline-style:dotted;
outline-color:#00ff00;
>

Описание и использование

Свойство CSS outline задает стиль рамки (outline), которая находится за пределами границ элемента и предназначена для выделения элемента.

Свойство outline-color задает цвет внешней границы.

Заметка: Всегда задавайте свойство outline-style перед настройкой outline-color. У элемента должна быть видимая внешняя граница, чтобы можно было изменить ее цвет.

Значение по умолчанию invert
Наследование нет
Версия CSS CSS 2
Синтаксис JavaScript object.style.outlineColor=»#00FF00″

Поддержка в браузерах

Свойство outline-color поддерживается всеми основными браузерами.

Заметка: свойство outline-color работает верно в Internet Explorer 8 (и выше), только если указан Doctype.

CSS outline-color

The CSS outline-color property is used to specify the color of an element’s outline.

Unlike an element’s border (e.g. set using border or its associated properties), an element’s outline does not take up extra space and it can be non-rectangular.

The outline is always on top of a box, and it does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

User agents typically render an outline on elements in the :focus state.

Syntax

Possible Values

This value performs a color inversion on the pixels on the screen. This is to ensure the focus border is visible, regardless of the background color.

If the user agent does not support the invert value, the initial value of the outline-color property is the currentColor keyword.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Example Code

Accessibility Considerations

The CSS spec warns against removing the outline on elements in the :focus state:

Keyboard users, in particular people with disabilities who may not be able to interact with the page in any other fashion, depend on the outline being visible on elements in the :focus state, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.

CSS Свойство outline-color

Пример

Установить цвет точечного контура:

p
<
outline-style:dotted;
outline-color:#00ff00;
>

Попробуйте сами »

Определение и Использование

Контур — это линия, которая рисуется вокруг элемента (вне его границ), чтобы сделать этот элемент «выделяющимся».

Свойство outline-color указывает цвет контура.

Замечание: Всегда объявляйте свойство outline-style перед свойством outline-color. Элемент должен иметь контур прежде чем вы сможете изменить его цвет.

Значение по умолчанию: invert
Наследуется: нет
Версия: CSS2
JavaScript синтаксис: объект.style.outlineColor=»#00FF00″

Поддержка Браузерами

Свойство outline-color поддерживается всеми основными браузерами.

Замечание: IE8 поддерживает свойство outline-color, только если указано объявление !DOCTYPE.

Советы и Замечания

Контур — это линия вокруг элемента. Она отображается вокруг поля элемента. Однако это не то же самое, что и свойство границы (border).

Контур не является частью размеров элемента, поэтому ширина и высота элемента не включают толщину контура.

How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?

I want to change the color of bootstrap textbox from the default blue. tried:

Not of much help. Also tried «:focus»

3 Answers 3

I presume you’re speaking about the blue glow on focus? Try this:

If you are using bootstrap 3 with LESS, you can set the variable @input-border-focus . This variable can be found in variables.less .

To whom visited this page and didn’t find a solution, what I did is replacing -webkit-focus-ring-color with desired color and it works just fine!

CSS outline-color Property

CSS outline-color property sets the outline color of an element.

Usages

The following table outline the usages and version history of this property.

Default value: invert
Applies to: All elements
Inherited: No
Version: CSS2
JavaScript Syntax: object.style.outlineColor = «#000000»

Syntax

Here is a syntax for the CSS outline-color property

Property Values

The following table describes the values of this property.

Value Description
invert Default. Specifies the inverts the color of the background
color Specifies the outline color
Value Description
color name Name of the outline color (eg, red, pink, blue)
#xxxxxx Hexadecimal representation of the outline color
rgb(x, x, x) RGB representation of the outline color
rgba(x, x, x, x) RGBA representation of the outline color
hsl(x, x, x) HSL representation of the outline color
hsla(x, x, x, x) HSLA representation of the outline color
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets outline color.

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Илон Маск рекомендует:  Что такое код hw_output_document
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL