Стиль ввода текста каретки - PullRequest
Новая
       17

Стиль ввода текста каретки

109 голосов
/ 07 сентября 2011

Я хочу стилизовать карету сфокусированного <input type='text'/>. Конкретно цвет и толщина.

Ответы [ 5 ]

73 голосов
/ 07 сентября 2011

«Карет» - это слово, которое вы ищете. Я верю, однако, что это часть дизайна браузеров, а не в рамках CSS.

Тем не менее, вот интересная статья о , имитирующая смену каретки с использованием Javascript и CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Мне кажется, это немного глупо, но, вероятно, единственный способ выполнить задачу. Суть статьи такова:

У нас будет просто текстовая область где-то на экране вне поля зрения. зрителя, и когда пользователь нажимает на наш «поддельный терминал», мы будем сосредоточиться на текстовой области, и когда пользователь начинает печатать, мы просто добавьте данные, введенные в текстовое поле, к нашему «терминалу», и это что.

ЗДЕСЬ - демонстрация в действии

2018 обновление

Существует новое свойство css caret-color, которое применяется к области input или contenteditable. Поддержка растет, но не на 100%, и это влияет только на цвет, а не на ширину или другие типы внешнего вида. 

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>
72 голосов
/ 04 мая 2015

Если вы используете браузер webkit, вы можете изменить цвет каретки, следуя следующему фрагменту CSS. Я не уверен, можно ли изменить формат с помощью CSS. 

input,
textarea {
    font-size: 24px;
    padding: 10px;

    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ccc;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

Вот пример: http://jsfiddle.net/8k1k0awb/

33 голосов
/ 02 февраля 2017

В CSS3 теперь есть собственный способ сделать это, без каких-либо хаков, предложенных в существующих ответах: свойство caret-color .

Есть много вещей, которые вы можете сделать с кареткой, как показано ниже. Это может даже быть анимированным . 

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

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

Свойство caret-color поддерживается в Firefox 55 и Chrome 60. Поддержка также доступна в Safari Technical Preview и в Opera (но еще не в Edge). Вы можете просмотреть текущие таблицы поддержки здесь .

8 голосов
/ 09 июля 2016

Вот некоторые продавцы, которых вы, возможно, мне ищете 

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

Вы также можете стилизовать различные состояния, такие как фокус 

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

Вы также можете сделать определенные переходы, например 

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}
2 голосов
/ 19 сентября 2017

Достаточно использовать свойство color вместе с -webkit-text-fill-color таким образом: 

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }
<input type="text"/>

Работает в браузерах WebKit (но не в iOS Safari, где все еще используется системный цвет для каретки), а также в Firefox.1015 * Свойство CSS -webkit-text-fill-color определяет цвет заливки символов текста .Если это свойство не установлено, используется значение свойства color. MDN

Таким образом, это означает, что мы устанавливаем цвет текста с цветом текста-заливки и цветом каретки со стандартным свойством цвета.В неподдерживаемом браузере каретка и текст будут иметь одинаковый цвет - цвет каретки.

...