-webkit- textarea在垂直滾動條上丟失頂部和底部填充

Question

我有一個固定寬度爲&的textarea元素，沒有調整大小，當垂直滾動條出現時，元素的填充（頂部&底部）被忽略。

這裏是一個plnkr演示：http://plnkr.co/edit/jOeYXqkOZk3FCT24BRrk?p=preview
這隻發生在Chrome（鉻，Linux版本的測試）。

這裏是我的textarea元素的造型：

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%; 
} 

*一個解決辦法是包textarea元素與特定的填充一個div裏面，但隨後的滾動條將不會重疊的填充，並期待有點奇怪。
編輯：好吧，也許它不會像我想的那麼奇怪，但我只是想知道是否有更優雅的修復，也許在CSS內。

Answer 1

我試着想一個解決方法，取決於你自己的提示。你說得對，但還沒有實現。 :)我剛剛編寫了你的​​想法。我所做的就是將其封裝在一個包裝中，並在僞元素之前和之後設置，以隱藏頂部和底部部分。我希望這能解決你的問題。它可以在Chrome，Firefox以及IE中完美運行。

.container { 
 
    width: 90%; 
 
    position: relative; 
 
} 
 
textarea { 
 
\t background-color: #1c1b1b; 
 
\t border:0; 
 
    border-radius: 4px; 
 
    color: #fff; 
 
    display: block; 
 
    height: 165px; 
 
    margin-bottom: 21px; 
 
    padding: 10px; 
 
    resize: none; 
 
    width: 100%; 
 
\t border-radius: 4px; 
 
} 
 
.container:before, .container:after { 
 
\t 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>