web-dev-qa-db-ja.com

テキスト入力でオーバーフローが表示されますが、可能ですか？

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の下部を表示することは可能ですか？

助けてくれてありがとう。

htmlcssoverflowhtml-input
19
Chris

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' />
7
Danield

簡単に言うと、これは不可能です！あなたができることは、入力の代わりにjavascript/html/cssを作成することだけです。しかし、これはオーバーヘッドになります。

アイデアを得るには：

  • 入力を非表示に設定します
  • 入力の下に「入力スタイリング」を使用してDIVを配置する
  • 入力をフォーカスしながらユーザーがキーを押したかどうかをJavaScriptにチェックさせ、入力値をdivにコピーします
4
Sebastian Hens

元の質問への回答-セバスチャンヘンズによってすでに示されているように、これは不可能です。その理由は、input要素は 置換された要素 であり、 overflowプロパティは置換されていない要素にのみ適用される であるためです。

overflowプロパティに関するMDNからの引用：

適用対象-置き換えられていないブロックレベル要素と置き換えられていないインラインブロック要素

コメントですでに述べたように、理想的な解決策はcontenteditable設定を尊重するため、overflow要素を使用することです。

複数のlinear-gradientを使用して破線のボーダー効果を生成する回避策ソリューションを次に示します。回答の一部はDanieldの回答から採用されました（paddingとheightの削除に関する部分）。その上に、appearanceを変更し、グラデーションを追加しました。

高さを明示的に追加していませんが、境界線内の領域の実際の高さは、元のコードと同じです。比較のために左側に元のコードを入力ボックスに追加しました。それが受け入れられるかどうかはわかりません。 heightを強制的に設定したい場合、これは機能しません。

input.test {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%);
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0px 0px, 0px 1em, 0px 0px, 100% 0px;
  box-shadow: inset 0px -10px 0px white;
  width: 200px;
}
input.original {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
  width: 200px;
}

input{
  vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type='text' value='gggyyyXXX' class='original' />
<input type='text' value='gggyyyXXX' class='test' />

上記のスニペットでは、白​​いbox-shadowを使用してグラデーションの下部を非表示にし、オーバーフローしないようにします（box-shadowを削除して効果を確認できます）。このため、単色の背景。一方、テキストボックスの高さが固定されている場合は、下のスニペットのようなものを使用して、無地の背景をサポートすることもできます。

input.original {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
  width: 200px;
}
input.test-fixedheight {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%),linear-gradient(to bottom, transparent 0%, white 0%);
  background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em, 100% 1em;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
  width: 200px;
}
input.test-fixedheight-transparent {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, crimson 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, beige 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%);
  background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
  width: 200px;
}


/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

input{
  vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type='text' value='gggyyyXXX' class='original' />
<input type='text' value='gggyyyXXX' class='test-fixedheight' />
<input type='text' value='gggyyyXXX' class='test-fixedheight-transparent' />

このアプローチは、Chrome、Firefox、OperaおよびIE11でテストされています。グラデーションはIE10でサポートされているため、動作するはずですそこにも問題はありませんが、グラデーションをサポートしていないため、下位バージョンでは機能しません。

3
Harry

本当に回避策の詳細ですが、上に境界線のない入力を絶対に配置しないのはなぜですか？

body {
  position:relative;
}
input {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
}
input.noborder {
  border:1px transparent solid;
  height:34px;
  position:absolute;
  left:0;
  background:transparent;
}
<input type='text' value=''/>
<input class="noborder" type='text' value='gggyyyXXX'/>
0
Jamie Barker