3

幅と高さが固定でサイズ変更のない textarea 要素があり、垂直スクロールバーが表示されると、要素のパディング (上下) は無視されます。

plnkr のデモは次のとおりです: http://plnkr.co/edit/jOeYXqkOZk3FCT24BRrk?p=preview
これは Chrome でのみ発生します (Chromium、Linux バージョンでテスト済み)。

テキストエリア要素のスタイリングは次のとおりです。

textarea{
    background-color: #1c1b1b;
    border-bottom: 3px solid #343434;
    border-radius: 4px;
    color: #fff;
    display: block;
    height: 165px;
    margin-bottom: 21px;
    padding: 10px;
    resize: none;
    width: 90%;
}

* 1 つの解決策は、特定のパディングを使用して div 内の textarea 要素をラップすることですが、スクロールバーがそのパディングと重ならず、奇妙に見えます。
編集: わかりました、思ったほど奇妙に見えないかもしれませんが、css 内でよりエレガントな修正があるかどうか疑問に思っています。

4

1 に答える 1

4

あなた自身のヒントに応じて、回避策を考えようとしました。あなたはそれを正しく理解していますが、まだ実装していません。:) 私はあなたのアイデアをコード化しました。私がしたことは、ラッパー内に囲み、疑似要素の前後に設定して、上部と下部のみを非表示にすることでした。それがあなたの問題を解決することを願っています。

Chrome、Firefox、IE でも完全に動作します。

.container {
    width: 90%;
    position: relative;
}
textarea {
	background-color: #1c1b1b;
	border:0;
    border-radius: 4px;
    color: #fff;
    display: block;
    height: 165px;
    margin-bottom: 21px;
    padding: 10px;
    resize: none;
    width: 100%;
	border-radius: 4px;
}
.container:before, .container:after {
	content:'';
    display: block;
    height: 10px;
    background: #1c1b1b;
    position: absolute;
    left: 4px;
    right: 18px;
}
.container:before {
    top: 0px;
}
.container:after {
    bottom: 0px;
}
<div class="container">
    <textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</div>

于 2015-01-17T18:40:35.033 に答える