caret-color CSS

Свойство caret-color задает цвет текстового курсора в полях ввода, например, input или textarea.

Свойство **`caret-color`** задает цвет текстового курсора в полях ввода, например, [`input`](/html/input/) или [`textarea`](/html/textarea/).
Значение по умолчанию:

auto

Значение по умолчанию:
`auto`
Наследуется:
Да
Применяется:

ко всем элементам

Применяется:
ко всем элементам
Анимируется:
Да
Спецификации:
Спецификации:
* [CSS Basic User Interface Module Level 3](https://drafts.csswg.org/css-ui-3/#propdef-caret-color)
Поддержка браузерами:

Can I Use css-caret-color? Data on support for the css-caret-color feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="css-caret-color" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-caret-color">Can I Use css-caret-color?</a> Data on support for the css-caret-color feature across the major browsers from caniuse.com. </p>

Синтаксис

/* Keyword values */
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

Синтаксис

/* Keyword values */ caret-color: auto; caret-color: transparent; caret-color: currentColor; /* <color> values */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228, 4%, 24%, 0.8);

Примеры

HTML

<input value="This field uses a default caret." size="64"/>
<input class="custom" value="I have a custom caret color!" size="64"/>
<p contenteditable class="custom">This paragraph can be
   edited, and its caret has a custom color as well!</p>

CSS

input {
  caret-color: auto;
  display: block;
  margin-bottom: .5em;
}

input.custom {
  caret-color: red;
}


p.custom {
  caret-color: green;
}

Примеры

HTML <input value="This field uses a default caret." size="64"/> <input class="custom" value="I have a custom caret color!" size="64"/> <p contenteditable class="custom">This paragraph can be edited, and its caret has a custom color as well!</p> CSS input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; } p.custom { caret-color: green; }

Содержание

  • Синтаксис
      /* Keyword values */ caret-color: auto; caret-color: transparent; caret-color: currentColor; /* <color> values */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228, 4%, 24%, 0.8);
  • Значения
    • Примеры
        HTML <input value="This field uses a default caret." size="64"/> <input class="custom" value="I have a custom caret color!" size="64"/> <p contenteditable class="custom">This paragraph can be edited, and its caret has a custom color as well!</p> CSS input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; } p.custom { caret-color: green; }

    В начало