☰

テキスト入力時にオーバーフローが表示されることはあり得ますか? 質問する

tag-icon • tag-icon html css overflow html-input
テキスト入力時にオーバーフローが表示されることはあり得ますか? 質問する

CSS はoverflow:visible入力に適用されないようです。

次の JS フィドルを参照してください。https://jsfiddle.net/b4sr578j/

input {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
}
<input type='text' value='gggyyyXXX'/>

gs と ys の下部を（テキスト入力の高さを増やさずに）表示することは可能ですか?

ご協力いただきありがとうございます。

ベストアンサー1

Webkit と Firefox の解決策は次のとおりです。

（これはIEでは動作しません。アウトラインオフセットをサポートしていません）

1) 高さを取り除く

2)outline代わりに使用するborder

3) 否定形を追加するoutline-offset

4)paddingオフセットを微調整する

フィドル

input {
  overflow: visible;
  font-size: 30px;
  outline: 1px dashed black;
  border: 0;
  outline-offset: -8px;
  padding: 6px 0 2px 8px;
}
<input type='text' value='gggyyyXXX' />

おすすめ記事