如何添加填充到textarea而不會導致寬度增加？

我一直有麻煩設置一個textarea元素的寬度和通過CSS使用填充。填充值似乎改變了textarea的寬度，我寧願不這樣做。如何添加填充到textarea而不會導致寬度增加？

這是我的HTML代碼：

<div id="body"> 
    <textarea id="editor"></textarea> 
</div>

我的CSS代碼：

#body { 
    height:100%; 
    width:100%; 
    display:block; 
} 

#editor { 
    height:100%; 
    width:100%; 
    display:block; 
    padding-left:350px; 
    padding-right:350px; 
}

然而，填充值不出現工作正如人們所期望。 textarea的寬度在兩個方向上都增加了350px，而不是在元素的邊界和內容之間定義空間。

我已經考慮過將邊距設置爲「0px auto」，但我希望用戶仍然可以滾動瀏覽textarea，如果鼠標懸停在某個空邊距上。出於同樣的原因，我不能添加另一個div來充當包裝，因爲用戶不能沿着空白區域滾動，而只能沿着無邊距文本區域滾動。

任何人都可以幫忙嗎？

來源

2010-11-15 木川炎星

CSS box model將「width」定義爲內容寬度，不包括邊框，填充和邊距。

幸運的是，CSS3有一個新的box-sizing屬性，可以讓你修改這個行爲，而不是用在包括指定寬度填充等：

box-sizing: border-box;

根據上面的鏈接，最現代的瀏覽器（包括IE> = 8）支持這個屬性，但是它們在每個瀏覽器中都有不同的名字。

來源

2010-11-15 01:54:08 casablanca

有趣。很難相信這隻有通過CSS3才能實現。無論如何，它的作品。謝謝！ – 2010-11-15 02:13:18

不錯的一個。這裏是FF/Safari的代碼： -moz-box-sizing：border-box;/* Firefox */ -webkit-box-sizing：border-box;/* Safari */ – 2012-04-27 19:12:11

注意：應該在父級上指定箱子尺寸，而不是textarea。 – mikeborgh 2015-04-25 02:05:52

由CSS指定的寬度不包括填充或邊框（符合W3C規範）。我猜這樣做的一種方式是使用一些JavaScript將#editor的寬度設置爲#body減去700px的寬度，但這有點麻煩......不確定是否有CSS的方式來做你想要的東西。當然，您可以使用margin，然後將onMouseWheel事件註冊到#body並使用它...

來源

2010-11-15 01:49:31

在'％'中指定寬度和邊距/填充有幫助。下面是一個例子 -

直播@http://jsfiddle.net/ninadpachpute/V2aaa/embedded/result

#body { 
    background-color:#ccc; 
    height:100%; 
    width:100%; 
    display:block; 
} 

textarea#editor { 
    border:none; 
    width:80%; 
    height:100%; 
    margin-left:10%; 
    margin-right:10%; 
}

來源

2012-02-24 07:10:32 Ninad

當您希望在textarea內進行PADDING時，它無濟於事。 – Leo 2013-02-13 16:53:04

有些瀏覽器可讓您指定佔位符，用於改變顏色等，這樣你就可以添加填充以及：

::-webkit-input-placeholder { /* WebKit browsers */ 
    padding: 5px 0 0 5px; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    padding: 5px 0 0 5px; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    padding: 5px 0 0 5px; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    padding: 5px 0 0 5px; 
}

來源

2017-12-16 19:43:42 iceT

如何添加填充到textarea而不會導致寬度增加？

回答

相關問題