web-dev-qa-db-ja.com

内側の影とスクロールバーを使用してテキスト領域を適切にスタイル設定する方法

次のCSSを使用して、すべてのコントロール、入力、およびテキスト領域に内側の影を付けています。

input {
  padding: 7px;
  -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
  -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
  box-shadow: inset 2px 2px 2px 0px #dddddd;
}

そして、他のスタイリングでは、次のようになります（Firefoxでは、他のブラウザーでも同様です）。

enter image description here

しかし、コンテンツを内側のシャドウから分離するのに役立つパディングは、スクロールバーの周りのテキストエリアを壊します：

enter image description here

そして、パディングを削除すると、次のようにテキストが影に重なります：

enter image description here

左にのみパディングを追加して、左の影との重なりを解決し、上部の影とは重複させずに、スクロールバーの外観を良くすることができます。

enter image description here

また、右側を除くすべての場所にパディングを追加できます。テキストは正しく表示されますが、ツールバーはかなり奇妙に見えます。

enter image description here

これを解決する方法はありますか？

htmlcsstextareashadow
25
pupeno

標準のtextarea要素を使用して、スクロールバーではなくコンテンツのみに影響を与えるpaddingプロパティを取得することはできません。そのためには、contenteditable DIVを使用できます。たとえば、次のフィドルを確認します。 http://jsfiddle.net/AQjN7/

HTML：

<div class="outer" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

CSS：

.outer {
    -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
    -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
    box-shadow: inset 2px 2px 2px 0px #dddddd;
    height: 200px;
    margin: 10px;
    overflow: auto;
    padding: 7px 10px;
    width: 300px;    
    font-family: tahoma;
    font-size: 13px;
    border: 1px solid #aaa;
}
​
19
techfoobar

さらに-ボタンを対象とする単純な入力を使用するのではなく、具体的にテキスト入力を対象にすることができます

input[type="text"]
0
Tapefreak

Divでtextareaをラップできます：

<div class="textarea-wrapper">
    <textarea>
</div>

css：

.textarea-wrapper{
    box-shadow: inset 2px 2px 2px 0px #ddd;
}
textarea {
    padding: 10px;
    background: transparent;
    border: none;
}

ここのjsFiddle： http://jsfiddle.net/rXpPy/

0
timing

追加することができます：padding-right: 0;をtextareaセレクターに追加すると、スクロールバーが要素の側面に整列します。 :)

0
Kyle