次の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では、他のブラウザーでも同様です)。
しかし、コンテンツを内側のシャドウから分離するのに役立つパディングは、スクロールバーの周りのテキストエリアを壊します:
そして、パディングを削除すると、次のようにテキストが影に重なります:
左にのみパディングを追加して、左の影との重なりを解決し、上部の影とは重複させずに、スクロールバーの外観を良くすることができます。
また、右側を除くすべての場所にパディングを追加できます。テキストは正しく表示されますが、ツールバーはかなり奇妙に見えます。
これを解決する方法はありますか?
標準の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;
}
さらに-ボタンを対象とする単純な入力を使用するのではなく、具体的にテキスト入力を対象にすることができます
input[type="text"]
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/
追加することができます:padding-right: 0;
をtextareaセレクターに追加すると、スクロールバーが要素の側面に整列します。 :)