Odaklanmış bir şapka stilini vermek istiyorum <input type='text'/>. Özellikle renk ve kalınlık.

Bir webkit tarayıcısı kullanıyorsanız, sonraki CSS parçacığını izleyerek imlecin rengini değiştirebilirsiniz. Biçimi CSS ile değiştirmenin mümkün olup olmadığından emin değilim.

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

İşte bir örnek: http://jsfiddle.net/8k1k0awb/

'Caret', aradığınız kelimedir. Yine de bunun tarayıcı tasarımının bir parçası olduğuna ve css'in anlayışı dahilinde olmadığına inanıyorum.

Bununla birlikte, Javascript ve CSS kullanarak bir düzeltme işareti değişikliğini simüle etme üzerine ilginç bir yazı var http://www.dynamicdrive.com/forums/showthread.php?t=17450 Bana biraz karışık geliyor, ama muhtemelen görevi yerine getirin. Makalenin ana noktası şudur:

Ekranda izleyicinin görüş alanı dışında bir yerde düz bir metin alanımız olacak ve kullanıcı "sahte terminalimize" tıkladığında metin alanına odaklanacağız ve kullanıcı yazmaya başladığında, yazılan verileri metin alanına ekleyeceğiz. bizim "terminalimize" ve bu kadar.

HERE , eylem halinde bir demodur

2018 güncellemesi

Bir yoktur yeni css özelliğicaret-color bir bir şapka için de geçerlidir inputveya contenteditablebölgede. Destek büyüyor, ancak% 100 değil ve bu yalnızca rengi etkiler, genişliği veya diğer görünüm türlerini değil.

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

<input type="text"/>

: CSS3, artık mevcut cevapları önerilen kesmek hiçbiri olmadan bunu yapmanın bir yerli yolu yoktur mülkiyet .caret-color

Aşağıda görüldüğü gibi, imleç ile yapabileceğiniz birçok şey var. Hatta canlandırılabilir .

/* 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-colorMülkiyet Firefox 55 dan desteklenmektedir ve Chrome 60. Destek Safari Teknik Önizlemesi'nde ve Opera (ancak henüz Edge) da mevcuttur. Güncel destek tablolarını buradan görüntüleyebilirsiniz .

İşte arayabileceğim bazı satıcılar

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

Odaklanma gibi farklı durumlara da stil verebilirsiniz.

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

Ayrıca üzerinde belirli geçişler de yapabilirsiniz, örneğin

::-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 ile birlikte color özelliğini şu şekilde kullanmak yeterlidir :

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

<input type="text"/>

WebKit tarayıcılarında (ancak hala düzeltme işareti için sistem renginin kullanıldığı iOS Safari'de değil) ve ayrıca Firefox'ta çalışır.

-Webkit-text-fill-color CSS özelliği , metin karakterlerinin dolgu rengini belirtir . Bu özellik ayarlanmazsa, color özelliğinin değeri kullanılır. MDN

Yani bu, metin rengini metin dolgu rengiyle ve düzeltme rengini standart renk özelliği ile ayarladığımız anlamına gelir. Desteklenmeyen tarayıcıda, düzeltme işareti ve metin, düzeltme işaretiyle aynı renkte olacaktır.