How to adjust the Caret (blinking cursor) size ins

问题:

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.

回答1:

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

input {
 caret-color: red;
 caret-color: #ff0000;
 caret-color: rgb(255, 0, 0);
 caret-color: hsl(0, 97%, 50%);
}

回答2:

Searching for Caret instead of Cursor will give you more results.

Appearently, it is not possible in a textarea, but is possible in other elements through Javascript:

Take a look at:

How to control cursor/caret size with CSS

How to modify the caret with css

and

Styling text input caret

回答3:

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?

回答4:

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.

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.

回答5:

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.

回答6:

You cannot do much with the caret size directly now. But if you need to just make the caret size a little smaller you can cheat by changing the input line-height. Please check the difference between 2 input fields:

.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>

回答7:

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

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