Как отрегулировать размер Caret (мерцающий курсор) внутри панели поиска с помощью css

Я попытался это сделать, и на удивление не нашел никакого результата... Интересно, как я могу использовать css для настройки мигающего курсора внутри окна поиска с помощью CSS? Я скорректировал размер окна поиска, но, похоже, мигающий размер курсора по-прежнему является оригинальным небольшим размером текста.

Ответ 1

Поиск Caret вместо курсора даст вам больше результатов.

По-видимому, это невозможно в текстовом поле, но возможно в других элементах через Javascript:

Взгляните на:

Как контролировать размер курсора/каретки с помощью CSS

Как изменить каретку с помощью css

Шаблон ввода текста <

Ответ 2

В настоящее время нет способа стилизации каретки, но если вы используете другой элемент DOM для отображения значения управления вводом, то вы можете. Взгляните на Как использовать этот квадратный курсор в поле ввода HTML?

Ответ 3

Если в вашем контексте есть колпачки, один легкий взломать - использовать атрибут css font-variant: small-caps;, чтобы увеличить размер каретки, чем текст.

Другой подход заключается в создании вашей собственной каретки с использованием замены поля ввода, кто-то провел время и достиг чего-то работающего, но автор рекомендует продолжайте использовать стандартный карет.

Ответ 4

Вы не можете изменить ширину каретки (по крайней мере, на данный момент); Но вы можете изменить цвет каретки для большинства современных браузеров.

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

Ответ 5

Как я знаю, нет прямого способа стилизовать каретку. Вместо этого здесь есть какая-то полезная информация, которая может помочь вам взломать ваш путь через эти проблемы.

По умолчанию высота каретки будет занимать высоту шрифта, единственный раз, когда она не будет, когда высота строки указана, она будет занимать эту высоту.

Итак, если вы хотите изменить высоту каретки, вы можете сделать это с помощью размера шрифта или высоты строки, если вы не хотите изменять размер шрифта.

Ответ 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>