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

Question

我试图谷歌它，并且令人惊讶地发现没有相关结果...... 我想知道如何用CSS调整搜索框内的CSS闪烁光标？ 我调整了搜索框的大小，但似乎闪烁的光标大小仍然是原始的小文本大小。

Answer 1

搜索Caret而不是Cursor将为您提供更多结果。

显然，它不可能在textarea中，但可以通过Javascript在其他元素中实现：

看看：

How to control cursor/caret size with CSS

How to modify the caret with css

和

Styling text input caret

Answer 2

“ Caret”是您要查找的词。不过，我确实相信，它是浏览器设计的一部分，而不是CSS所掌握的。

但是，这是有关使用Javascript和CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450模拟插入符号更改的有趣文章，对我来说似乎有点棘手，但这可能是完成任务的唯一方法。本文的重点是：

  

我们将在视图之外的屏幕上的某个地方显示一个纯文本区域   查看器，当用户单击我们的“伪终端”时，我们将   专注于文本区域，当用户开始输入文字时，我们将   将输入到textarea中的数据附加到我们的“终端”，这就是   那个。

Here是实际的演示。

1. 就像演示一样，您可以使用div来创建搜索框，然后使用javascript将输入文本复制到其中，然后将您的插入符号（用CSS制作）附加到它上。
2. 您知道font-size也可以更改插入号的大小。

---

您还可以使用以下命令更改插入符号的颜色，

input{
  caret-color:red;
}

<input type="text">

Answer 3

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

Answer 4

如果您的上下文中的大写字母是正常的，那么一个简单的方法是使用css属性 font-variant：small-caps; 来使插入符号大于文本。

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

Answer 5

你不能改变插入符号的宽度（至少目前为止）; 但您可以更改大多数现代浏览器的插入颜色

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

Answer 6

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

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

因此，如果您想要修改插入符号高度，可以通过字体大小或通过行高来进行修改，如果您不想更改字体大小。

Answer 7

您现在不能直接用插入号进行太多操作。但是，如果您只需要使插入符号的大小更小，则可以通过更改输入行高来作弊。请检查2个输入字段之间的区别：

.input {
  border: 0;
  background: #fff;
  font-size: 16px;
  padding: 0 5px;
}

.input1 {
  line-height: 25px;
}

.input2 {
  line-height: 16px;
}

.input-wrapper {
 background-color: #fff;
 height: 40px;
 display: inline-block;
 display: flex;
 align-items: center;
 margin-bottom: 20px;
}

.background {
  background-color: #ccc;
  height: 100px;
  padding: 20px;
}

<div class="background">
<span class="input-wrapper">
  <input type="text" name="input" class="input input1">
</span>

<span class="input-wrapper">
  <input type="text" name="input" class="input input2">
</span>
</div>

Answer 8

<report
        id = "report_custom_sale_order"
        string = "Quotation / Order"
        model = "sale.order"
        report_type = "qweb-pdf"
        file = "custom_saleorder.report_saleorder"
        name = "custom_saleorder.report_saleorder"
        paperformat = "custom_saleorder.paperformat_a4"
/>