用CSS在文本输入中设置光标样式

Question

我在为搜索栏设计表格

​

​

这里是

<form class="search-form" action="index_submit" method="get" accept-charset="utf-8">
  <input type="search" name="search" placeholder="Search here...">
  <button type="submit"><i class="fa fa-search"></i></button>
  <div class="clearfix"></div>
</form>

，这是我的CSS

.search {
   position: static;
}

.search-box {
   position: absolute;
   top: 50%;
   left: 50%;
}

.search-form input[type="search"] , .search-form button {
   outline: none;
   border: none;
   padding: 10px;
   margin: 0;
   float: left;
   color: black;
}

.search-form input {
   background-color: yellow;
}

.search-form button {
   text-align: center;
}

当光标在文本字段中闪烁时，我陷入了这个问题。我想让光标垂直地对齐中间。我给出了填充，但它不工作，我希望CSS自定义游标。谢谢。

Answer 1

尝试添加“文本对齐:中心”到您的搜索栏输入样式。我不确定你的意思是你想要这样光标就不会显示出来？如果这就是你的意思，请看一下这个链接。

Hide textfield blinking cursor

Answer 2

我找到了确切的解决办法。我使用的是引导程序3，在CSS下面找到了

input, button, select, textarea {

   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
}

所以问题就在line-height: inherit;中。因为它继承了父容器的行高，所以光标位于中心上方.

我只是通过添加line-height: initial;来改变CSS