輸入寬度VS textarea的寬度

讀線程 Input size vs width 輸入寬度VS textarea的寬度

我很清楚，我們不應該使用大小屬性，但css樣式之後。

跨瀏覽器CSS會爲輸入[text]和textarea顯示完全相同的寬度是什麼？

BTB，我試圖

#idInputText, #idTextArea { 
font: inherit; 
width: 60ex;

}

它是正確的嗎？更好的解決方案？

在此先感謝您的幫助。

來源

2009-09-27 rajakvk

文本輸入元素的本地填充不同。您需要爲輸入元素和textarea元素和實驗分配不同的寬度。

#form input.textfield { width:10em; } 
#form textarea { width:9em; }

只拋出一些默認樣式（我更喜歡ems）並彈出打開Firebug並通過更改大小值進行實驗。

我通常會在<input type=text>上拋出一個class=textfield，所以我不打算用<input type=submit>或類似的。

來源

2009-09-27 05:29:06

請注意，您可以針對'輸入[類型=「文本」]'，爲好，以避免造型提交按鈕（儘管它不適用於IE6）。 – 2015-03-10 16:26:37

通過首先應用CSS重置，您可能會在不同瀏覽器中獲得更一致的結果。本文列出了一些很好的例子：

https://stackoverflow.com/questions/116754/best-css-reset

一旦你已經取消了對填充和利潤的微妙瀏覽器的差異，然後60ex的你的主人寬度應允許輸入排隊。

來源

2009-09-27 09:03:18 ferdley

不幸的是，這個問題被刪除了，但是這個鏈接到了www.css-reset.com，它有一些關於CSS重置的有用信息（令人震驚），因爲我們窮人n00bs需要他們;）。 [鏈接]（http://www.css-reset.com/） – Jaime 2013-03-13 17:32:27

我會避免一個通用的CSS復位，但使用這樣的：

input[type="text"], input[type="password"], textarea { 
    width: 60ex; 
    margin: 0; 
    padding: 2px; /* it's best to have a little padding */ 
    border: 1px solid #ccc; /* gets around varying border styles */ 
    border-radius: 4px /* optional; for newer browsers */ 
}

只要你在標準模式，而不是怪癖模式這應該能正常運行大多數瀏覽器。

注：

的屬性選擇 - [type="text"] - 不要在IE6工作，所以你不妨選擇一個類名來代替。
不能讓所有瀏覽器以完全相同的方式顯示錶單域。
使用ex作爲單位，雖然一個好主意，可能無法在固定像素寬度的環境中很好地工作。

來源

2009-09-28 17:04:49 DisgruntledGoat

使用像素而不是EM或pct值。不管基本字體大小如何，所有瀏覽器都是60px = 60px。

來源

2009-09-28 17:08:09

-1

填充左，右0像素

來源

2010-08-25 03:09:13 Jose

這是什麼？ – hims056 2012-12-14 03:51:25

請爲您的答案提供更多背景信息。 – 2012-12-14 03:51:56

，我遲到了這個晚會，但在任何情況下運行到這一點，並需要使用前對寬度，我終於得到它的工作。

Textareas默認使用等寬字體爲他們的字體家族。所以，你需要重寫。這個CSS工作對我來說：

input[type="text"], textarea { 
    font-family: Arial, sans-serif; 
    border: 2px groove; 
    padding: 2px; 
    margin: 10px; 
    width: 35ex; 
}

這裏有一個小提琴證明：https://jsfiddle.net/Lxahau9c/

來源

2016-09-08 18:57:19 Rob

輸入寬度VS textarea的寬度

回答

相關問題