瀏覽器私有屬性

一.css中抬頭

• ::-moz代表firefox瀏覽器私有屬性
• ::-ms代表ie瀏覽器私有屬性
• ::-webkit代表safari、chrome私有屬性
• ::-o代表opera

二.常見的中私有屬性拿chrome瀏覽器舉例

::如果前面為空代碼全局,如果前面有某個元素的css選擇器代表改元素的對於內容

1.輸入框

::-webkit-input-placeholder {}


//阻止input出現黃色背景
input:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: inset 0 0 0 1000px white !important;
}

清除input[type=”number”]側邊的箭頭
input::-webkit-inner-spin-button { -webkit-appearance: none; }

2.禁用選擇文本

* {
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

3.selection (下拉框)

::-webkit-selection {}

4.滾動條

::-webkit-scrollbar{} //滾動條寬度
::-webkit-scrollbar-thumb {}  //滑軌上滑塊
::-webkit-scrollbar-button {}  //滑軌兩頭的監聽按鈕顏色
::-webkit-scrollbar-track {}   //定義滾動條軌道

-webkit-overflow-scrolling: touch; //允許獨立的滾動區域和觸摸回彈

//影藏滾動條
::-webkit-scrollbar {
    width: 0px;  
}

//舉例
/*定義滾動條樣式*//*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar {
    height: 0.01rem;
    background-color: #fff;
}

/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
    border-radius: 0.1rem;
    background-color: #fff;
}

/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
    border-radius: 0.1rem;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #fff;
}

5.input-range

::-webkit-slider-thumb{}  //一定要配合::-webkit-slider-runnable-track使用,否則會沒有效果.......
裡面參數和滑動塊類似

6.字體描邊

-webkit-text-strokeCSS屬性為文本字元指定了寬 和 顏色 . 它是-webkit-text-stroke-width和-webkit-text-stroke-color屬性的縮寫.

/* 全局設置 */
/* 寬度和顏色屬性 */
-webkit-text-stroke: <length> <color>;
-webkit-text-stroke-width：絕對<length>
-webkit-text-stroke-color：<color>
-webkit-text-stroke: 1px red;

/* 全局屬性 */
/* 預設設置 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;


/* 局部設置 */
div {
    -webkit-text-stroke: <length> <color>;
}