フォントサイズを変えても入力カーソルの幅が変わらない

Question

10px以下の文字を表示できないというchromeの仕様に対処するため、本来の10倍のフォントサイズを設定した上でtransform: scaleで10分の1に縮小しようと思ったのですが
どうやら入力カーソル(キャレット)の幅はフォントサイズによらず一定のようで、結果として入力カーソルだけ想定の10分の1の幅で表示されてしまいます

<input value="ああああ">

input {
  width: 500px;
  height: 80px;
  font-size: 80px;
  transform-origin: top left;
  transform: scale(0.1);
}

↓上記コードの実行結果

↓通常の入力カーソル

この問題を解決する手段としては
①入力カーソルのサイズをフォントサイズとは別に操作する
②scaleを用いるのをやめ、別の方法で10px以下の入力フォームを表示する
③入力カーソルを自作する
などがあると思うのですが

①、②に関してはその方法が全く思い浮かばず、現在③を試みているのですがそれも上手くいっておらず手詰まりの状態です
解決策に思い当たる節のある方がいましたらどうか助言を頂きたいです

Answer 1

一応10px以下にもなりますが、細かいサイズは調整出来ません。

input {
  font-variant-caps: all-small-caps;
  font-size:10px;
  height:10px;
}

表示確認
https://codepen.io/recal/pen/yLzMwrL

Comments

[recal]

あとアイデアだけですが、
実際のinputは隠しておき、
divで疑似入力欄を作って擬似キャレットを用意すれば
細かいサイズ調整も出来るんじゃいかなと思いました
(疑似入力欄に入力された文字はjsでinputに送る)

[flandre]

回答ありがとうございます
font-variant-capsというプロパティは今初めて知りましたが、大文字のアルファベットを小さくできるプロパティという認識で良いのでしょうか？
なるほど、確かにこれを使えば英字入力の際にフォントサイズ以下で表示することができるんですね。教えて頂きありがとうございます
かな文字と漢字でも同じことができれば目的を実現できるのですが、もしそのようなプロパティがあれば教えて頂けると幸いです

div要素にcontenteditableを適用して疑似的に入力フォームとする方法は自分も試みたのですが、疑似キャレットの挙動再現が如何せん難しく…
キャレットの表示位置・動作条件の設定が上手くいかず、またinputと違って要素の幅を超過したテキストを収納してくれる仕様も無いため難航しております

[recal]

あれ、サンプルページのひらがなは両方10pxのまま表示されてますか？
よろしければ表示環境をおしえていただけますでしょうか

追記
確かにchromeとsafariは日本語もokでしたが
firefoxだと英数だけしか小さくなってませんでした、失礼しました><

[flandre]

chromeのバージョン96で確認しているのですが、どういうわけか両方10pxのまま表示されているようです…

↓スクリーンショットです
https://i.imgur.com/ssipfbX.png

恐らくこちら側の環境の問題だと思います。お手数おかけしてしまって申し訳ありません

[recal]

https://imgur.com/a/XxumC9K
こちらのmacのchromeだとこんな感じになります。

こちらこそ確認が足りずお手間を取らせてしまい申し訳ないです。

[flandre]

本来はちゃんと日本語にも適用されるのですね…
ブラウザの問題でないとすればOSがwindowsであることが原因なのか、それともこのPCの設定に何か違いがあるのか…。知識の浅い自分には見当も付かないです

当環境でfont-variant-capsが適用されない原因、並びにピクセルサイズの指定を行う手段が思い当たらず、これ以上recal様の労力をいたずらに割かせてしまうのも心苦しいので、この回答をベストアンサーとしようと思います
このような深夜まで対応して頂いて本当に感謝の限りです