跨瀏覽器輸入字段寬度程式化

我有一種運送/賬單輸入的形式和我有麻煩造型輸入字段是相同的寬度......跨瀏覽器輸入字段寬度程式化

問題：
-a場<input type="text" size="X" />出現在不同的瀏覽器中以不同的尺寸渲染（見link）。
- 另外，選擇的字段似乎也以不同的方式呈現。
-Chrome/safari似乎沒有響應選擇字段的font-size屬性。

任何有關如何設置文本輸入和選擇字段大小的跨瀏覽器指導將非常有幫助。

我必須得到每個瀏覽器有不同的表格嗎？只是爲了這些輸入字段？ -thanks

來源

2010-03-16 Derek Adair

首先刪除內聯「大小」屬性。您應該使用CSS來設置輸入表單的樣式：

input[type="text"] { 
    width: 100px; 

    /* You can also style padding, margins and everything else, 
    * just remember that inputs of type "text" can only be one line. 
    */ 
}

請勿將[type =「text」]用作選擇器。在本例中，我只是將它用於與「text」類型的輸入字段相關聯，但它沒有完全支持跨瀏覽器。你應該給你的文本輸入字段自己的類風格化。

此外，不要忘了你的CSS重置，以確保您的利潤率，邊界等。人。重置所有瀏覽器。 http://meyerweb.com/eric/tools/css/reset/

來源

2010-03-16 16:58:49 dclowd9901

其實，使用eric meyer reset，並使用css來設置寬度，正如你所解釋的，在比較webkit和IE7時，並不是所有的輸入字段都有相同的寬度 - > IE9 – 2011-05-18 10:06:38

以我的經驗，他們是休息時間。例如，盒子模型有很多愚蠢的不一致之處：如何將輸入字段放入其父盒子的寬度的100％。通常情況下，您可以通過將父框設置爲100％寬度，然後設置內框的邊距或填充參數來實現此目的，但由於輸入字段是自包含的，因此無法在任何平臺中創建方式將文本框的寬度與其父容器保持一致（而不是其他方法是乾淨的或語義的）。理想情況下，框和字段應該有一個outsideWidth定義。 – dclowd9901 2011-05-18 15:54:01

此答案不提供輸入框的一致大小。它有一些有價值的信息，但沒有回答這個問題。 – BishopZ 2013-05-31 14:38:08

現在，可以使用已達到體面的瀏覽器支持的ch單位來標準化「大小」輸入的寬度。

不幸的是，它仍然不可能寫：

input[size] { 
    width: attr(size) "ch"; 
}

因此，我們要的風格的寬度，我們知道我們將使用：

input[size="10"] {width: 10ch;} 
input[size="20"] {width: 20ch;} 
input[size="30"] {width: 30ch;} 
/* etc. */

這可以很容易地使用自動化一個CSS預處理器。

UPDATE：

我做了一個test fiddle。從今天開始（2018年2月），這個版本在Windows 10上使用Chrome 63，Edge 41，FF 58.在IE 11上，它失敗了。我沒有嘗試過OS X.

來源

2016-07-15 09:50:31 xfra35

太糟糕「ch」實際上並不適用於輸入大小。例如。與等寬字體，爲了得到一個顯示30個字符的輸入框，在IE上我必須設置37ch，並在Chrome 33ch上。在我看來，這幾乎是無用的。 – user9645 2018-02-06 18:14:42

我做了一個[測試小提琴]（https://jsfiddle.net/bujr1d94/1/）。在Windows 10上，這與Chrome 63，Edge 41，FF 58一起工作。在IE 11上，它失敗。我還沒有嘗試過OS X. – xfra35 2018-02-07 08:57:50

跨瀏覽器輸入字段寬度程式化

回答

相關問題