天天看點

area标簽高亮_屏蔽谷歌浏覽器(webkit)中的input、textarea的預設點選/聚焦高亮的樣式...

WebKit作為一個開源的浏覽器引擎,而且有google及蘋果的大力推廣,應該将來的市場占有的份額應該不錯。

同時蘋果和google推出的相關智能手機也會用到webkit核心的mini浏覽器。

這兩款webkit引擎的浏覽器其中預設添加了對使用者體驗非常好的小功能:

其一、頁面輸入框(input 标簽)聚焦高亮。?

area标簽高亮_屏蔽谷歌浏覽器(webkit)中的input、textarea的預設點選/聚焦高亮的樣式...

屏蔽input聚焦高亮效果的樣式:

input {outline: none;}textarea {outline: none;}

其二、文本框(textarea 标簽)縮放功能。

area标簽高亮_屏蔽谷歌浏覽器(webkit)中的input、textarea的預設點選/聚焦高亮的樣式...

textarea {width: 400px;max-width: 400px;height:

400px;max-height: 400px;}texearea {resize: none;}

可能将來的網頁會偏向簡潔設計,是以webkit開發團隊已經不考慮當設計的輸入框是圓角的時候輸入框和文本框出現的問題,是以當你隐藏了點選前的樣式而你如果忘記去掉了聚焦後的webkit賦予的預設樣式,webkit引擎浏覽器的就會出現問題。

如圖:

area标簽高亮_屏蔽谷歌浏覽器(webkit)中的input、textarea的預設點選/聚焦高亮的樣式...

如果考慮相容webkit核心的浏覽器,建議設計輸入框或者文本框的時候盡量保持原始的樣式,如果設計做了很好看的圓角背影的效果

----------------------------------------------------------------

input文本框在IE及各浏覽器下的相容問題

對于input在各個浏覽器下的表現真的是很讓人蛋疼和不解,也是衆多前端童鞋痛恨至極的一個選擇器。借鑒一下飛魚的聲納寫的一篇文章input标簽預設樣式的差别及其跨浏覽器設計,大家可以直接踩傳送門過去看下IE和FF下這個蛋疼标簽的大小及顯示。

之前還有一篇文章寫的是使用text-indent縮進輸入框在谷歌浏覽器下無效的問題,忘記在哪裡看到的了,但是這也是大家應該注意的一點,如果實在需要使用這樣的效果,那可以考慮加JS來解決,不過一般不推薦。

下面羅列一下input使用注意事項:

盡量不要使用height來指定文本框的大小,可以使用padding的方式,或者使用height加line-height的方法;

input的文本框預設是有background屬性的,是以要透明,必須設定background:none;

input預設也是有邊框的,而且在IE和FF下對邊框的解析還是不一樣的,如果你的網站用到input的地方比較多,建議寫一個通用的頭

input{border:none;}

input如果設定了高度那麼在IE和FF中很難取得輸入文本位置一緻的效果。