Стиль ввода текста курсор
Я хочу, чтобы стиль каретки сосредоточен <input type='text'/>
. В частности, цвет и толщина.
5 ответов
Если вы используете браузер 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/
'каре' - это слово, которое вы ищете. Я считаю, что это часть дизайна браузеров, а не в пределах досягаемости css.
однако, вот интересная запись на имитация изменения курсора с помощью Javascript и CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 это кажется мне немного избитым, но, вероятно, единственный способ выполнить эту задачу. Главный пункт статьи:
мы будем имейте простую текстовую область где-то на экране вне поля зрения зрителя и когда пользователь нажимает на "поддельный терминал" мы сосредоточьтесь на textarea и когда пользователь начнет печатать, мы просто добавьте данные, введенные в textarea к нашему "терминалу", и это что.
здесь демо в действии
обновить 2018
есть новое свойство css caret-color
что применяется к каретке input
или contenteditable
зона. Поддержка растет, но не на 100%, и это влияет только на цвет, а не на ширину или другие типы внешнего вида.
input{
caret-color: rgb(0, 200, 0);
}
<input type="text"/>
в 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 и в 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
: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;}
достаточно использовать цвета собственность вместе с - 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 и цвета каретки со стандартным свойством цвета. В неподдерживаемом браузере каретка и текст будут иметь одинаковый цвет-цвет каретки.