字體家族沒有被繼承到表單輸入字段？

不要輸入文本字段或選擇框等html表單輸入元素會自動繼承體內的font-family屬性嗎？例如：字體家族沒有被繼承到表單輸入字段？

body { 
font-family:'Lucida Casual', 'Comic Sans MS'; 
}

它不會使用上面的字體在下面的表單輸入字段：

<form> 
    <div> 
     <label for="name">Name</label> 
     <input id="name" name="name" type="text" /> 

    <div> 
</form>

請看看http://jsfiddle.net/3fkNJ/

它是常見的，我們必須重新 - 爲輸入字段定義字體家族，還是我做錯了什麼？

來源

2011-06-29 sunjie

是的，您需要將font放入input標記中。

.input{ 
padding:5px; 
font-size:16px; 
font-family:'Lucida Casual', 'Comic Sans MS';  
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

您還可以使用inherit設置font上form領域。

input, textarea, select{font-family:inherit;}

http://jsfiddle.net/jasongennaro/3fkNJ/7/

編輯 - 解釋加

大多數瀏覽器渲染內form元素作爲用戶的操作系統的文本。據我瞭解，這是爲了保持用戶的共同外觀和感覺。但是，它可以全部被上面的代碼覆蓋。

來源

2011-06-29 12:37:03

這並不在jQuery的自動完成的情況下工作。你有線索爲什麼？ –

@ManasPaldhe這可能是因爲自動完成有一個更具體的CSS選擇器。我檢查了http://jqueryui.com/autocomplete/，它顯示'input'有一個'tags'的「tags」。在這個'id'中設置字體，你應該很好。 –

代碼沒有問題。這是常見的，因爲輸入字段默認採用OS主題設置。這已在stackoverflow中討論過。查看下面的鏈接瞭解更多詳情。

Why <textarea> and <textfield> not taking font-family and font-size from body?

來源

2011-06-29 12:47:35 z0mBi3

試着改變你的CSS身體屬性

body *{font-family:'Lucida Casual', 'Comic Sans MS';}

的*部隊每個子元素繼承你寫的，因爲過規範的CSS規則的CSS規則中指定的值。請參閱fiddle here

如果您希望頁面上的每個元素都具有相同的字體系列值，如果您希望表單具有不同的值，則此功能非常方便。

Smashing Magazine has an article這可能會幫助你進一步。

我希望它有幫助。

來源

2011-06-29 12:50:07 Ryan

這會工作，但它是sl practice的練習。性能會受到來自'*'選擇器的影響，而'*'會優先考慮您可能無法預料的方式。 – TechZilla

它並沒有讓它成爲「草率的練習」，它只是意味着在使用時人需要了解他們在做什麼，因此是粉碎雜誌的參考。就性能而言，是的，它使用更大的瀏覽器開銷，但如果適當的話取決於目標，每個元素是否應該具有相同的字體，而不管或只有幾個元素？如果它只是一些元素，那麼在選擇器中指定更好。對我來說，孫潔很清楚，他希望所有元素都具有相同的字體，而不管我的解決方案是否適合執行此操作，但是，是的，它將在其他地方收費。 – Ryan

我想你誤解了，我所說的是「草率的做法」。雖然最好避免使用無關的「*」選擇符，但只使用一個不一定是「草率實踐」。另一方面，使用你的CSS來避免繼承特性是「馬虎的做法」。作者沒有提到他希望*通用*在具有指定字體系列的選擇器之前。 – TechZilla

它的工作對我來說：

tags-input *, tags-input *:before, tags-input *:after { 
    font-family: "IRANSans" !important; 
} 

tags-input .tags .input { 
    padding-right: 5px; 
    float: right !important; 
    font: 13px "IRANSans", tahoma !important; 
} 

tags-input .tags .tag-item { 
    float: right !important; 
    font: 13px "IRANSans", tahoma !important; 
}

來源

2016-05-08 07:00:20 mehdi

字體家族沒有被繼承到表單輸入字段？

回答

相關問題