Мне нужна помощь, чтобы изменить высоту каретки - без изменения визуального (допускается использование хаков/трюков до тех пор, пока они работают). Я имею в виду, что я не хочу менять размер шрифта (высота и ширина), поля, paddings, color, background, border и т.д., и если я изменю его, чтобы добиться стиля каретки, сделайте так, чтобы я мог вернуть его, как обычный вход, с его возможностями стилизации.
Моя лучшая попытка заключалась в следующем коде:
body{
background-color: lightBlue;
}
#background{
color: red;
height: 61px;
margin-top: 0px;
text-shadow: 0 0 0 transparent;
width: 173px;
-webkit-text-fill-color: transparent;
-webkit-transform: scale(1,calc(1/3));
}
#text{
background-color: transparent;
border-color: transparent;
color: red;
left: 8px;
pointer-events: none;
position: absolute;
top: 103px;
}
<span>Caret height (pixels):</span>
<br>
<br>
<input placeholder="15 (default)" spellcheck="false">
<br>
<br>
<input id="background" oninput="document.getElementById('text').value=this.value" spellcheck="false">
<input id="text" placeholder="5 (1/3)" onfocus="this.blur()" spellcheck="false" tabindex="-1">