屏蔽Chrome(webkit)中的input、textarea的默認點擊/聚焦高亮的樣式

WebKit做爲一個開源的瀏覽器引擎,並且有google及蘋果的大力推廣,應該未來的市場佔有的份額應該不錯。 css

同時蘋果和google推出的相關智能手機也會用到webkit內核的mini瀏覽器。
這兩款webkit引擎的瀏覽器其中默認添加了對用戶體驗很是好的小功能:
其1、頁面輸入框(input 標籤)聚焦高亮。? css3

003949A26-0 屏蔽input聚焦高亮效果的樣式:

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

其2、文本框(textarea 標籤)縮放功能。 瀏覽器

00394a149-1  

/*css2.0*/textarea {width: 400px;max-width: 400px;height: 400px;max-height: 400px;}/*css3.0*/texearea {resize: none;} google

可能未來的網頁會偏向簡潔設計,因此webkit開發團隊已經不考慮當設計的輸入框是圓角的時候輸入框和文本框出現的問題,因此當你隱藏了點擊前的樣式而你若是忘記去掉了聚焦後的webkit賦予的默認樣式,webkit引擎瀏覽器的就會出現問題。 
spa

如圖: 設計

00394945W-2 若是考慮兼容webkit核心的瀏覽器,建議設計輸入框或者文本框的時候儘可能保持原始的樣式,若是設計作了很好看的圓角背影的效果
相關文章
相關標籤/搜索