造型文字輸入插頁

Question

我想塑造專注<input type='text'/>的插頁風格。具體來說，顏色和厚度。

Answer 1

演示如果您使用的是WebKit瀏覽器，你可以通過下面的下一個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: #ccc; 
    text-shadow: none; 
    -webkit-text-fill-color: initial; 
} 

下面是一個例子：http://jsfiddle.net/8k1k0awb/

Answer 2

''字母'是你正在尋找的詞。我確實相信，它是瀏覽器設計的一部分，並不在CSS的掌握之中。

但是，這裏有一個有趣的寫了上模擬使用JavaScript插入符號的變化和CSShttp://www.dynamicdrive.com/forums/showthread.php?t=17450這似乎有點哈克給我，但可能完成任務的唯一途徑。文章的主要觀點是：

我們會在屏幕上有一個純文本區域某處觀衆的視野 的，當我們的「假冒終端」用戶點擊我們將 重點放到textarea的並且當用戶開始輸入時，我們將簡單地 將輸入到textarea的數據附加到我們的「終端」，那就是 。

HERE在行動

Answer 3

以下是你可能我找

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

Answer 4

在CSS3中，現在有一種原生的方式可以做到這一點，而不存在現有答案中提出的任何黑客攻擊：the caret-color property。

如下圖所示，您可以對插入符號做很多事情。它甚至可以是be animated。

/* 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瀏覽器技術預覽版，並在Opera（但尚未邊緣）。您可以查看當前支持表here。

Answer 5

這就夠用顏色財產一起與-webkit-文本的填充色這樣：

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

<input type="text"/>

作品在WebKit瀏覽器（但不是在iOS版Safari，仍然使用系統顏色作爲插入符號）以及Firefox中。

的-webkit-文本的填充色CSS屬性指定的文本的 字符填充顏色。如果此屬性未設置，則使用 顏色屬性的值。 MDN

所以這意味着我們使用標準顏色屬性設置帶文本填充顏色和插入符號的文本顏色。在不受支持的瀏覽器中，脫字符和文本將具有相同的顏色 - 插入符的顏色。