CSS對于表單元素中的input標(biāo)簽是一種非常重要的樣式設(shè)置,尤其是對于Web表單的設(shè)計(jì)者而言。但是,每個(gè)瀏覽器間的輸入框樣式都是不相同的,甚至在同一個(gè)瀏覽器跨不同版本之間也可能存在兼容性問題。因此,我們需要采取一些措施來確保在不同的瀏覽器和版本下都能正確顯示input元素的樣式。
input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #ccc; padding: 5px; border-radius: 5px; } input:focus { outline: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
上面的代碼是一種常見的CSS樣式設(shè)置,可以使得瀏覽器取消對input元素的默認(rèn)樣式設(shè)置。同時(shí),給input設(shè)置一些邊框和陰影效果,增加了用戶與表單交互的響應(yīng)感和友好度。但是,在不同的瀏覽器和版本下,可能存在一些樣式上的不同。
比如,一些老版本的IE瀏覽器可能不支持border-radius的設(shè)置,這樣就會導(dǎo)致顯示的四個(gè)角沒有圓形效果,而是直角。此時(shí),我們可以使用一些Hack技巧,只在IE瀏覽器下特殊處理:
input::-ms-clear { display: none; } input::-ms-reveal { display: none; }
上面的代碼可以去掉IE瀏覽器下input元素的“清除”和“查看密碼”按鈕。這是一種Hack技巧,但是可以讓表單在不同瀏覽器下的樣式效果更加協(xié)調(diào)、一致。
上一篇css3字體rgba
下一篇css input 失效