HTML輸入框太寬的數據指定字體

是被已要求輸入字段上我們的一些形式有粗體文字的權力時。問題是，在樣式表這樣的簡單的方式：HTML輸入框太寬的數據指定字體

input { 
    font-weight: bold; 
}

使用此HTML：

1234567890 
<input type="text" maxlength="10" size="10" value="1234567890"/>

立即引起問題：現在的輸入框中的所有太寬。

notice the extra spaces

我已經收窄到雅虎重置從父（文檔正文）告訴輸入框font: inherit。這是我想要的行爲 - 輸入框具有與父主體相同的字體。但是，只要我指定字體，或使用繼承，輸入框又太寬了。這在IE和Firefox中是一樣的，所以它可能不是瀏覽器兼容性問題。

看到它在行動：http://jsfiddle.net/clintp/bZChP/3/

如何指定輸入框的字體，但有他們的大小是否合適？

更新：「適當地」 http://jsfiddle.net/clintp/bZChP/5/輸入右邊小部件是用於它的數據的大小是否合適，在左側的一個不是。我們的目標是使兩個框具有相同的大小，相同的文本字體[一個是粗體！]，而不必爲應用程序的每個輸入框指定框的大小。（有上千個。）

來源

2012-10-10 Clinton Pierce

這不會幫助您解決問題，但Internet Explorer 7和更早版本不支持「方向」以外的任何屬性的「inherit」值，並且'visibility'。 – haynar

對我來說是件好事：我們不會在我們的應用程序中正式支持IE 7。別擔心。 –

你不能在實踐中，尺寸輸入字段可靠的，除非你使用等寬。即使是monopace字體，瀏覽器在計算字段寬度方面也存在一些錯誤。如果僅將HTML中的可見寬度設置爲size屬性，並且將字體大小和系列設置爲CSS，則列出等寬字體似乎可以正常工作，但可能會獲得最一致的結果。例如，

輸入{字體：100％龍力控制檯，等寬; }

這將解決這個問題，在某些瀏覽器，例如<input size=10>導致字符寬度大約爲12個字符。

至於到輸入框具有相同的字體作爲上級機構的要求，很好，那麼你需要使用等寬字體父也。 ☺嚴重的是，儘管我們應該也能夠使用比例字體設置輸入字段的寬度，但事情並不奏效。即使支持ch單元的瀏覽器（如果數字輸入發生問題，它也會出現問題）會不一致並且不正確，因此設置例如即使對於輸入0000000000，width: 10ch也沒有給出正確的渲染。

來源

2012-10-10 16:34:22

這就是它。切換到等寬度似乎完全解決了這個問題。現在我必須說服設計師在輸入字段中允許使用等寬字體！ –

作出這樣的調整既字體大小和重量CSS類。在你想要的輸入中使用該類名稱。

<input class="bold" type="text" maxlength="10" size="10" value="1234567890"/> 

.bold { 
    font-weight:bold; 
    font-size:10px; 
}

來源

2012-10-10 15:14:34

這並不能解決問題，它只是將其從元素中移出到類中：http://jsfiddle.net/clintp/bZChP/4/ –

您：「如何指定輸入框的字體，但讓他們適當的大小？「 ....而這正是我告訴你如何去做的。 –

http://jsfiddle.net/clintp/bZChP/5/右側的輸入小部件的大小適合其數據，左側的小部件不適合。 –

:) 首先，你的問題的父母是什麼？

就在你的CSS補充一點：

yourparent input 
{ 
    font-weight:regular /* Just set a value like your parent of input*/; 
}

來源

2012-10-10 15:22:30 lijinma

（Body-> Form-> Div-> Div-> Table-> Tbody-> Tr-> Td-> Input）它繼承了下來，我沒有在其他地方指定字體。 –

「table input {font-weight：inherit}」或「table input {font-weight：normal}」呢？我認爲默認的字體重量是正常的。 – lijinma

你爲什麼不設置一個固定的寬度，以大膽的輸入？

http://jsfiddle.net/pBXbY/

來源

2012-10-10 15:58:27

如果尺寸是10，那很好。如果是20，該怎麼辦？ 15？ 6？ –

如果這是一項要求，那麼它將無法正常工作。但是，正如你所看到的，像「20」這樣的更大的數字，額外的空間已經消失了！所以，針對較低的數字聽起來不會太糟糕。檢查：http://jsfiddle.net/pBXbY/2/ –

HTML輸入框太寬的數據指定字體

回答

相關問題