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.
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.
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.
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 .
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 tę stronę.
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.
<input type="text"/>
ChybaOdpowiedzi:
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.
Oto przykład: http://jsfiddle.net/8k1k0awb/
źródło
„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:
TUTAJ jest demo w akcji
Aktualizacja 2018
Pojawiła się nowa właściwość CSS,
caret-color
która dotyczy daszka obszaruinput
lubcontenteditable
. Wsparcie rośnie, ale nie w 100%, a to wpływa tylko na kolor, a nie na szerokość lub inne rodzaje wyglądu.źródło
W CSS3, jest teraz rodem sposób to zrobić, bez żadnych hacków sugerowanych w istniejących odpowiada: na
caret-color
własność .Jest wiele rzeczy, które możesz zrobić z opiekunem, jak pokazano poniżej. Można go nawet animować .
Ta
caret-color
wł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 .źródło
Oto kilku dostawców, których mógłbym szukać
Możesz także stylizować różne stany, takie jak fokus
Możesz także wykonać na nim określone przejścia, takie jak
źródło
Wystarczy użyć właściwości color razem z -webkit-text-fill-color w ten sposób:
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.
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.
źródło