造型文字输入插页

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

所以这意味着我们使用标准颜色属性设置带文本填充颜色和插入符号的文本颜色。在不受支持的浏览器中，脱字符和文本将具有相同的颜色 - 插入符的颜色。