1. 程式人生 > >移動端頁面預設樣式重置

移動端頁面預設樣式重置

1、-webkit-tap-highlight-color (這個屬性只用於IOS(iphone和ipad)

    當你點選一個連結或者通過js定義的可點選的元素時,它會出現一個半透明的灰色背景,要重置這個表現,可以通過設定-webkit-tap-highlight-color為任何顏色。

    eg、設定高亮色為50%透明的紅色

            -webkit-tap-highlight-color: rgba(255,0,0,0.5);    

2、outline:none

    屬性值設為:

    a、取消webkit核心瀏覽器下預設的文字框聚焦樣式 (input,textarea { outline: none; }) ;

    b、在pc端為a標籤定義此樣式,是為了取消IE瀏覽器下點選a標籤時出現的虛線,IE7及以下版本還不識別此屬性,需要在a標籤上新增hidefocus="true" ;

 3、-webkit-appearcance:none

     消除輸入框和按鈕的預設樣式,在IOS上加上這個屬性才能給按鈕和輸入框自定義樣式,不同type的input使用這個屬性之後表現不一,text、button無樣式,radio、checkbod直接消失。

4、user-select:none

    禁止頁面文字選擇,此屬性不繼承,一般加在body上規定整個body的文字都不會自動調整。  

    -webkit-user-select: none;   ( Chrome/safari )

    -ms-user-select: none;  ( fireFox )

     IE6-9不支援該屬性,但支援使用標籤屬性 onselectstart="return false"達到user-select: none的效果;

    直到opera12.5不支援該屬性,支援私有的標籤屬性userselectable="on"來達到user-select: none的效果;

 5、text-size-adjust: none / 100%

    -ms-text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;

    禁止文字自動調整大小(預設情況下旋轉裝置的時候文字大小會發生變化),此屬性也不繼承,一般加上在body上,規定整個body的文字都不會自動調整

 。

6、-webkit-touch-callout: none

    禁止長按頁面是彈出選單

7、-webkit-overflow-scrolling: touch

    區域性滾動(僅IOS5.0以上支援)