118

Я хочу стилізувати каре цілеспрямовано <input type='text'/>. Зокрема, колір і товщина.

1

Що ж, це <input type="text"/>я гадаю

— Бенджамін Крузьє

Він шукає стилю карети, редагував питання та теги

— Бенджамін Удінк десять Кейт,

Будь ласка, подумайте про зміну прийнятої відповіді. З огляду на останні зміни у CSS, оновлена відповідь Майкла Джаспера значно перевершує: stackoverflow.com/a/7339406/1889273

— Боаз

74

Якщо ви користуєтеся веб-браузером, ви можете змінити колір каретки, дотримуючись наступного фрагмента 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) - просто редагуйте колір заливки тексту та введення.

— Велда

86

«Карета» - це слово, яке ви шукаєте. Я все ж вважаю, що це частина дизайну браузерів, а не в розумінні css.

Однак, ось цікавий запис про моделювання зміни каретки за допомогою Javascript та CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Мені це здається трохи задирливим, але, напевно, єдиним способом виконати завдання. Основний пункт статті:

У нас буде звичайна текстова область десь на екрані поза зоною перегляду глядача, і коли користувач натисне на наш "підроблений термінал", ми зосередимося на textarea, і коли користувач почне вводити текст, ми просто додамо дані, введені в текстові області до нашого «терміналу», і це все.

ТУТ демонстрація в дії

Оновлення 2018 року

Існує нова властивість css,caret-color яка стосується карети inputабо 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

Це корисно для стилізації тексту прокладки, однак воно не стилює миготливу карету, на яку посилається ОП.

— 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.

Властивість -webkit-text-fill-color CSS визначає колір заливки символів тексту . Якщо ця властивість не встановлена, використовується значення властивості кольору. MDN

Отже, це означає, що ми встановлюємо колір тексту з кольором заливки тексту та кольором каретки зі стандартною властивістю кольору. У непідтримуваному браузері карета та текст матимуть однаковий колір - колір карети.

— Велда
джерело

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

Оновлення 2018 року