input標簽寫CSS時需要注意什麼呢

歡迎大家在這裡學習input標簽寫CSS時需要注意什麼!這裡是我們給大家整理出來的精彩內容。我相信，這些問題也肯定是很多朋友在關心的，所以我就給大家談談這個!

為了徹底解決搜索框的這些問題，我以GreenGaint主題搜索框的樣式為准，重寫了一遍代碼並且以像素為單位測量了一下在沒有任何樣式表的情況

結果發現：input標簽在type為text時，在Firefox和Safari中的默認高度為22像素(包括上下邊框)寬度為146像素(包括左右邊框)，而在IE中的默認高度為24像素，而寬度卻和Firefox和Safari是一致的，也是146像素。當 input標簽在type為submit時，在Firefox中的高度為23像素(包括陰影)，寬度為75像素。在Safari中高度為21像素，寬度為73像素，在IE中高度為為25像素、寬度為73像素。

那麼在樣式化input標簽時又該注意哪些問題呢?先來看下面經過樣式化後，在不同浏覽器中都有著良好表現的搜索框。

總結一下，在給input標簽寫CSS時需要注意的有以下幾點：

一、不要給屬性為text的input標簽設置高度，這樣無法讓IE浏覽器下輸入框中的文字垂直居中顯示。盡管你後來想要通過設置padding屬性來讓文字居中，你會發現根本沒法讓它在Firefox和IE中取得一致的效果。正確的做法是直接給input標簽設置padding屬性，通過內邊距屬性來調節input標簽的高度，而且這時IE中的文字也是居中顯示的。

二、input標簽不會繼承父元素的字體樣式和大小，需要直接給input標簽聲明font-family和font-size屬性。

三、給屬性為text的input標簽設置合適的width屬性和padding屬性，確保其中的文字在合適的范圍內出現。尤其是使用了背景圖片後，要讓文字框的大小和背景圖片的大小相當，這樣看上去更加美觀。

好了，input標簽寫CSS時需要注意什麼內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

CSS設計網頁頭部的優化怎麼寫呢