Я хочу стилизовать каретку сфокусированного <input type='text'/>
. В частности, цвет и толщина.
Стилизация ввода текста
Ответы (6)
Если вы используете браузер 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/
«Карет» — это слово, которое вы ищете. Однако я верю, что это часть дизайна браузеров, а не 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"/>
input
элементах или это единственное решение - хакерский обходной путь?
- person oldboy; 14.10.2020
caret-shape
( где мы можем установить auto | bar | block | underscore
) и сокращение caret
< /а>. Жаль, что в настоящее время они никем не поддерживаются (даже на Могу ли я использовать на момент написания этой статьи)
- person BarryCap; 16.07.2021
В 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). Текущие таблицы поддержки можно просмотреть здесь.
Вот некоторые поставщики, которых вы могли бы мне найти
::-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;}
Достаточно использовать свойство 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.
CSS-свойство -webkit-text-fill-color определяет цвет заливки символов текста. Если это свойство не установлено, используется значение свойства цвета. MDN
Таким образом, это означает, что мы устанавливаем цвет текста с помощью text-fill-color и цвет курсора со стандартным свойством цвета. В неподдерживаемом браузере курсор и текст будут иметь одинаковый цвет — цвет курсора.
это просто. Просто добавьте атрибут цвета вставки следующим образом:
* {cursor: url(http://labs.semplice.com/wp-content/uploads/2020/02/custom-cursor-arrow.png) 20 20, auto;}
input, div {padding: 20px;}
<input style="caret-color: rgb(0, 200, 0);">
<br>
<textarea style="caret-color: blue;"></textarea>
<br>
<div contenteditable style="padding: 5px; border: 1px solid black;border-color: black;caret-color: red"></div>
<input type="text"/>
я думаю - person Benjamin Crouzier   schedule 07.09.2011