Chcę stylizować opiekę skoncentrowaną <input type='text'/>. W szczególności kolor i grubość.

Jeśli używasz przeglądarki webkit, możesz zmienić kolor daszka, postępując zgodnie z następnym fragmentem kodu CSS. Nie jestem pewien, czy można zmienić format za pomocą 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;
}

Oto przykład: http://jsfiddle.net/8k1k0awb/

„Caret” to słowo, którego szukasz. Wierzę jednak, że jest to część projektu przeglądarki, a nie w zasięgu css.

Jednak tutaj jest interesujący opis symulacji zmiany karetki za pomocą JavaScript i CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Wydaje mi się to trochę hackowe, ale prawdopodobnie jedyny sposób, aby wykonać zadanie. Głównym punktem artykułu jest:

Będziemy mieć zwykły obszar tekstowy gdzieś na ekranie poza widokiem przeglądarki i kiedy użytkownik kliknie na nasz "fałszywy terminal", skupimy się na obszarze tekstowym, a gdy użytkownik zacznie pisać, po prostu dodamy wpisane dane do pola tekstowego do naszego „terminala” i to wszystko.

TUTAJ jest demo w akcji

Aktualizacja 2018

Pojawiła się nowa właściwość CSS,caret-color która dotyczy daszka obszaru inputlub contenteditable. Wsparcie rośnie, ale nie w 100%, a to wpływa tylko na kolor, a nie na szerokość lub inne rodzaje wyglądu.

input{
  caret-color: rgb(0, 200, 0);
}

<input type="text"/>

W CSS3, jest teraz rodem sposób to zrobić, bez żadnych hacków sugerowanych w istniejących odpowiada: na caret-colorwłasność .

Jest wiele rzeczy, które możesz zrobić z opiekunem, jak pokazano poniżej. Można go nawet animować .

/* 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);

Ta caret-colorwłaściwość jest obsługiwana w przeglądarkach Firefox 55 i Chrome 60. Pomoc jest również dostępna w Safari Technical Preview oraz w Operze (ale jeszcze nie w Edge). Możesz wyświetlić aktualne tabele wsparcia tutaj .

Oto kilku dostawców, których mógłbym szukać

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

Możesz także stylizować różne stany, takie jak fokus

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

Możesz także wykonać na nim określone przejścia, takie jak

::-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;}

Wystarczy użyć właściwości color razem z -webkit-text-fill-color w ten sposób:

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }

<input type="text"/>

Działa w przeglądarkach WebKit (ale nie w iOS Safari, gdzie nadal używany jest kolor systemowy dla daszka), a także w Firefox.

Właściwość CSS -webkit-text-fill-color określa kolor wypełnienia znaków tekstu . Jeśli ta właściwość nie jest ustawiona, używana jest wartość właściwości koloru. MDN

Oznacza to, że ustawiamy kolor tekstu za pomocą koloru wypełnienia tekstu i koloru daszka ze standardową właściwością koloru. W nieobsługiwanej przeglądarce daszek i tekst będą miały ten sam kolor - kolor daszka.