10px以下の文字を表示できないというchromeの仕様に対処するため、本来の10倍のフォントサイズを設定した上でtransform: scaleで10分の1に縮小しようと思ったのですが
どうやら入力カーソル(キャレット)の幅はフォントサイズによらず一定のようで、結果として入力カーソルだけ想定の10分の1の幅で表示されてしまいます
HTML
1<input value="ああああ">
CSS
1input { 2 width: 500px; 3 height: 80px; 4 font-size: 80px; 5 transform-origin: top left; 6 transform: scale(0.1); 7}
この問題を解決する手段としては
①入力カーソルのサイズをフォントサイズとは別に操作する
②scaleを用いるのをやめ、別の方法で10px以下の入力フォームを表示する
③入力カーソルを自作する
などがあると思うのですが
①、②に関してはその方法が全く思い浮かばず、現在③を試みているのですがそれも上手くいっておらず手詰まりの状態です
解決策に思い当たる節のある方がいましたらどうか助言を頂きたいです
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/16 13:34
2021/12/16 15:35
2021/12/16 15:42 編集
2021/12/16 16:59 編集
2021/12/16 17:27
2021/12/16 18:01