Html 样式文本输入插入符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7339333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling text input caret
提问by Randomblue
I want to style the caret of a focused <input type='text'/>. Specifically, the color and thickness.
我想设置重点的插入符号的样式<input type='text'/>。具体来说，颜色和厚度。
采纳答案by Nestor Britez
If you are using a webkit browser you can change the color of the caret by following the next CSS snippet. I'm not sure if It's possible to change the format with CSS.
如果您使用的是 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;
}
Here is an example: http://jsfiddle.net/8k1k0awb/
这是一个例子：http: //jsfiddle.net/8k1k0awb/
回答by Michael Jasper
'Caret' is the word you are looking for. I do believe though, that it is part of the browsers design, and not within the grasp of css.
'Caret' 是您要查找的词。不过我确实相信，它是浏览器设计的一部分，而不是在 css 的掌握范围内。
However, here is an interesting write up on simulating a caret change using Javascript and CSShttp://www.dynamicdrive.com/forums/showthread.php?t=17450It seems a bit hacky to me, but probably the only way to accomplish the task. The main point of the article is:
但是，这里有一篇关于使用 Javascript 和 CSS 模拟插入符号更改的有趣文章http://www.dynamicdrive.com/forums/showthread.php?t=17450对我来说似乎有点 hacky，但可能是唯一的方法完成任务。文章的主要观点是：
We will have a plain textarea somewhere in the screen out of the view of the viewer and when the user clicks on our "fake terminal" we will focus into the textarea and when the user starts typing we will simply append the data typed into the textarea to our "terminal" and that's that.
我们将在屏幕上的某个地方有一个纯文本区域，在查看器的视图之外，当用户点击我们的“假终端”时，我们将聚焦到文本区域，当用户开始输入时，我们将简单地将输入的数据附加到文本区域中到我们的“终端”，就是这样。
HEREis a demo in action
这里是一个演示在行动
2018 update
2018年更新
There is a new css property caret-colorwhich applies to the caret of an inputor contenteditablearea. The support is growing but not 100%, and this only affects color, not width or other types of appearance.
有一个新的 css 属性caret-color适用于inputorcontenteditable区域的插入符号。支持在增长，但不是 100%，这只会影响颜色，不会影响宽度或其他类型的外观。
input{
caret-color: rgb(0, 200, 0);
}<input type="text"/>回答by Sacha Nacar
In CSS3, there is now a native way to do this, without any of the hacks suggested in the existing answers: the caret-colorproperty.
在CSS3，现在要做到这一点，没有任何现有的答案提出的黑客的当地人方式：该caret-color属性。
There are a lot of things you can do to with the caret, as seen below. It can even 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);
The caret-colorproperty is supported from Firefox 55, and Chrome 60. Support is also available in the Safari Technical Preview and in Opera (but not yet in Edge). You can view the current support tables here.
caret-colorFirefox 55 和 Chrome 60 支持该属性。 Safari Technical Preview 和 Opera（但尚未在 Edge 中）也提供支持。您可以在此处查看当前的支持表。
回答by Sergey Khmelevskoy
Here are some vendors you might me looking for
这里有一些你可能要找的供应商
::-webkit-input-placeholder {color: tomato}
::-moz-placeholder {color: tomato;} /* Firefox 19+ */
:-moz-placeholder {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder {color: tomato;}
You can also style different states, such as focus
您还可以设置不同状态的样式，例如焦点
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
You can also do certain transitions on it, like
您还可以对其进行某些转换，例如
::-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;}
回答by Velda
It is enough to use colorproperty alongside with -webkit-text-fill-colorthis way:
以这种方式将color属性与-webkit-text-fill-color一起使用就足够了：
input {
color: red; /* color of caret */
-webkit-text-fill-color: black; /* color of text */
}<input type="text"/>Works in WebKit browsers (but not in iOS Safari, where is still used system color for caret) and also in Firefox.
适用于 WebKit 浏览器（但不适用于 iOS Safari，其中插入符号仍使用系统颜色）和 Firefox。
The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used. MDN
-webkit-text-fill-color CSS 属性指定text 字符的填充颜色 。如果未设置此属性，则使用颜色属性的值。MDN
So this means we set text color with text-fill-color and caret color with standard color property. In unsupported browser, caret and text will have same color – color of the caret.
所以这意味着我们使用 text-fill-color 设置文本颜色，使用标准颜色属性设置插入符号颜色。在不受支持的浏览器中，插入符号和文本将具有相同的颜色——插入符号的颜色。
