如何使用 css 调整搜索栏中的插入符号（闪烁光标）大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15249288/
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
How to adjust the Caret (blinking cursor) size inside searchbar with css
提问by weia design
I tried to google it, and surprisingly found no result related... I wonder how can I use css to adjust the blinking cursor inside the search box with CSS? I adjusted the size of the search box, but seem the blinking cursor's size is still original small text size.
我试图用谷歌搜索它，但令人惊讶地发现没有相关结果......我想知道如何使用 css 用 CSS 调整搜索框中的闪烁光标？我调整了搜索框的大小，但闪烁光标的大小似乎仍然是原始的小文本大小。
回答by Hossein
You cannot change the width of the caret (at least for now); But you can change the caret color for majority of modern browsers
你不能改变插入符号的宽度（至少现在是这样）；但是您可以更改大多数现代浏览器的插入符号颜色
https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
input {
caret-color: red;
caret-color: #ff0000;
caret-color: rgb(255, 0, 0);
caret-color: hsl(0, 97%, 50%);
}
回答by Andrea Ligios
Searching for Caret instead of Cursor will give you more results.
搜索 Caret 而不是 Cursor 将为您提供更多结果。
Appearently, it is not possible in a textarea, but is possible in other elements through Javascript:
显然，它在 textarea 中是不可能的，但可以通过 Javascript 在其他元素中实现：
Take a look at:
看一眼：
How to control cursor/caret size with CSS
How to modify the caret with css
and
和
回答by sarkiroka
There is no way to styling the caret currently, but if you use another DOM element to display the input control value then you can. Take a look at How to use this square cursor in a HTML input field?
目前无法设置插入符号的样式，但是如果您使用另一个 DOM 元素来显示输入控件值，那么您可以。看看如何在 HTML 输入字段中使用这个方形光标？
回答by Digitonaut
If caps is ok in your context, one easy hack is to use the css attribute font-variant: small-caps;to get the caret larger than the text.
如果 caps 在您的上下文中没问题，一个简单的技巧是使用 css 属性font-variant: small-caps; 使插入符号大于文本。
Another approach is to create your own caret using an input field replacement, someone spent time and achieved something working, but the author recommend to keep using the standard caret.
回答by Oussama Bouthouri
As I know, there's no direct way to style the caret. Instead here's some useful infos that can help you hack your way through this problems.
据我所知，没有直接的方法来设置插入符号的样式。相反，这里有一些有用的信息，可以帮助您解决这些问题。
By default the caret height will take the font height, the only time it will not, is when the line height is specified then it will take this height.
默认情况下，插入符号高度将采用字体高度，唯一一次不会，是当指定行高时，它将采用此高度。
So if you want to modify the caret height you can do it through font-size or through line height if you don't want to change the font size.
因此，如果您想修改插入符号高度，如果您不想更改字体大小，则可以通过 font-size 或通过行高来完成。
回答by Nathan Marq
<style>
.input_strips {
font-family: monospace;
<!--change the font size this will change the input cursor and the text box-->
font-size: 30px;
}
</style>
