Stylizacja karetki wprowadzania tekstu

118

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

Randomblue
źródło
1
Cóż, to jest dla <input type="text"/>Chyba
Benjamin Crouzier
Chce stylizować karetkę, edytować pytanie i tagi
Benjamin Udink ten Cate
Prosimy o rozważenie zmiany zaakceptowanej odpowiedzi. Biorąc pod uwagę najnowsze zmiany CSS, zaktualizowana odpowiedź Michaela Jaspera jest zdecydowanie lepsza: stackoverflow.com/a/7339406/1889273
Boaz

Odpowiedzi:

74

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/

Nestor Britez
źródło
3
Sprytny hack, ale emoji nie działają, ponieważ po prostu zostają wypełnione przez cień 😭
simbolo
Hmm, odcienie nie są potrzebne do uzyskania efektu w moim przypadku (Chrome na komputery i FF) - po prostu edytuj kolor wypełnienia tekstu, a następnie wprowadź.
Velda
86

„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"/>

Michael Jasper
źródło
38

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 .

Sacha Nacar
źródło
1
Pokonaj mnie do ponczu. Oczywiście ta właściwość będzie działać tylko w przeglądarce Firefox, przynajmniej na razie, i zostanie udostępniona dopiero w kwietniu 2017 r. Zobacz stronę.
SpyderScript,
6

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;}
Sergey Khmelevskoy
źródło
5
Jest to przydatne do stylizacji tekstu placholdera, ale nie nadaje stylu migającej karetki, do której odwołuje się OP.
craignewkirk
4

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.

Velda
źródło