Стилизация курсора ввода текста

118

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

Randomblue
источник
1
Ну, это для <input type="text"/>меня
Бенджамин Крузье
Он хочет
стилизовать курсор
Пожалуйста, подумайте об изменении принятого ответа. Учитывая последние изменения CSS, обновленный ответ Майкла Джаспера намного превосходит: stackoverflow.com/a/7339406/1889273
Боаз,

Ответы:

74

Если вы используете браузер 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:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

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

Нестор Бритез
источник
3
Умный хак, но смайлики не работают, они просто стали заполняться тенью 😭
Simbolo
Хм, в моем случае оттенки не нужны для эффекта (настольный Chrome и FF) - просто отредактируйте text-fill-color затем input.
Velda
86

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

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

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

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


Обновление 2018

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

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>

Майкл Джаспер
источник
38

В 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 (но не в Крае). Вы можете просмотреть текущие таблицы поддержки здесь .

Саша Накар
источник
1
Ударь меня до удара. Конечно, это свойство будет работать только в Firefox, по крайней мере, сейчас, и не будет выпущено до апреля 2017 года. См. Эту страницу.
SpyderScript
6

Вот некоторые поставщики, которых я могу найти

::-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;}
Сергей Хмелевской
источник
5
Это полезно для стилизации текста placholder, однако не стилизует мигающий курсор, на который ссылается OP.
Craignewkirk
4

Достаточно использовать свойство цвета вместе с -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.

Свойство CSS -webkit-text-fill-color определяет цвет заливки символов текста . Если это свойство не установлено, используется значение свойства цвета. MDN

Это означает, что мы устанавливаем цвет текста с помощью text-fill-color и цвет курсора со стандартным свойством цвета. В неподдерживаемом браузере курсор и текст будут иметь один цвет - цвет курсора.

Velda
источник