在CSS輸入中定位文本

我正在構建聯繫表單。目前我有一個文本框設置了頂部和底部填充。我的文字看起來像這樣。 enter image description here 在CSS輸入中定位文本

正如您所看到的，我的輸入框文本兩側沒有任何填充，看起來相當難看。但是如果我修改我在reguards CSS來我的輸入框，它添加填充到實際的盒子，而不是文字本身，推動東西過來：

enter image description here

我敢肯定，我可以做這樣的事情給一個爲了抵消填充和調整寬度，我們需要弄清楚如何在輸入內部定位文本。我知道這是一個有點難以想像，所以這裏是我想要的結果：

enter image description here

這是我目前的CSS。

/* top two boxes */ 
input 
{ 
width: 49.9%; 
font-size: 24px; 
padding-top: 12px; 
padding-bottom: 12px; 
} 

/* textarea CSS*/ 
textarea 
{ 
font-family: 'Open Sans', sans-serif; 
width: 100%; 
height: 200px; 
font-size: 24px; 
}

有沒有某種選擇我失蹤了？

來源

2014-01-25 Alexander Lozada

box-sizing：border-box？邊框值（與內容框默認值相反）會使最終渲染框的聲明寬度以及框內的任何邊框和內邊距被切割。爲Firefox使用-moz-box-sizing。

來源

2014-01-25 16:41:13 immo

我不想沒有填充;我想在我的輸入文本中填充文本，而不是輸入元素本身，因爲它會導致第二張圖片中發生的情況。我已經知道了默認的填充。 –

「我敢肯定，我可以做一些事情，比如給盒子一個負邊距來抵消填充和調整寬度，但我更想知道如何在輸入本身內定位文本。」 –

這個技巧！如果你編輯你的答案並加入，我會贊成並選擇答案，謝謝。 –

在CSS輸入中定位文本

回答

相關問題