如何使用css调整搜索栏中的插入符号（闪烁光标）大小答案

【问题标题】：How to adjust the Caret (blinking cursor) size inside searchbar with css如何使用css调整搜索栏中的插入符号（闪烁光标）大小
【发布时间】：2013-03-06 13:59:49
【问题描述】：

我尝试用谷歌搜索它，但令人惊讶的是没有找到相关的结果...... 我想知道如何使用 css 来调整带有 CSS 的搜索框内的闪烁光标？我调整了搜索框的大小，但闪烁光标的大小似乎还是原来的小文本大小。

【问题讨论】：

@mrbinky3000 好吧，这不是一篇文章（你已经知道，超过 2k 代表），如果你知道实现这一目标的新方法，回答会比评论更有成效其他人应该回答...“成为你想在世界上看到的改变”，以及所有的爵士乐；）
How to control cursor/caret size with CSS的可能重复

标签： css searchbar

【解决方案1】：

您无法更改插入符号的宽度（至少目前如此）；但是您可以更改大多数现代浏览器的插入符号颜色

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

【讨论】：

【解决方案2】：

搜索 Caret 而不是 Cursor 会得到更多结果。

显然，在 textarea 中是不可能的，但通过 Javascript 在其他元素中是可能的：

看看：

How to control cursor/caret size with CSS

How to modify the caret with css

和

Styling text input caret

【讨论】：

似乎不是一个解决方案，更多的是一种复杂的方式来处理简单的调整。不会使用它们，我会保持原样，atm 我猜......但是，如果其他人有更好的解决方案，实际上将插入符号的大小扩展到接近搜索栏输入字段本身的大小，将不胜感激！

【解决方案3】：

目前无法设置插入符号的样式，但如果您使用另一个 DOM 元素来显示输入控件值，则可以。看看How to use this square cursor in a HTML input field?

【讨论】：

【解决方案4】：

如果在您的上下文中大写是可以的，一个简单的技巧是使用 css 属性 font-variant: small-caps; 使插入符号大于文本。

另一种方法是使用输入字段替换创建自己的插入符号，有人花了时间和achieved something working，但作者建议继续使用标准插入符号。

【讨论】：

【解决方案5】：

据我所知，没有直接的方法来设置插入符号的样式。相反，这里有一些有用的信息可以帮助您解决这些问题。

默认情况下，插入符号高度将采用字体高度，唯一不会的情况是，当指定行高时，它将采用此高度。

因此，如果您想修改插入符号的高度，可以通过 font-size 或如果您不想更改字体大小，则通过 line height 进行。

【讨论】：

【解决方案6】：

<style>
.input_strips {
font-family: monospace;

<!--change the font size this will change the input cursor and the text box-->
font-size: 30px; 
}
</style>

【讨论】：