摘錄自Vue中文社區(qū)鏈接至 49 個(gè)在工作中常用且容易遺忘的 CSS 樣式清單整理
1. placeholder樣式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
color: red;
}
input:-moz-placeholder { /* Firefox 18- */
color: red;
}
2. 解決IOS頁面滑動(dòng)卡頓
body,html{
-webkit-overflow-scrolling: touch;
}
3. 設(shè)置滾動(dòng)條樣式 // 只兼容Opera Chrome
.test::-webkit-scrollbar{
/*滾動(dòng)條整體樣式*/
width : 10px; /*高寬分別對應(yīng)橫豎滾動(dòng)條的尺寸*/
height: 1px;
}
.test::-webkit-scrollbar-thumb {
/*滾動(dòng)條里面小方塊*/
border-radius : 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.test::-webkit-scrollbar-track {
/*滾動(dòng)條里面軌道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
4.實(shí)現(xiàn)隱藏滾動(dòng)條同時(shí)又可以滾動(dòng)
.demo::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.demo {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
5、移動(dòng)端軟鍵盤變?yōu)樗阉鞣绞?/h6>
默認(rèn)情況下軟鍵盤上該鍵位為前往或者確認(rèn)等文字，要使其變?yōu)樗阉魑淖帜己荆枰?input 上加上 type 聲明：
<form action="#">
<input type="search" placeholder="請輸入..." name="search" />
</form>
6. 使元素鼠標(biāo)事件失效
.wrap {
// 如果按tab能選中該元素，如button唯鸭，然后按回車還是能執(zhí)行對應(yīng)的事件，如click硅确。
pointer-events: none;
cursor: default;
}
7.禁止用戶選擇
.wrap {
-webkit-touch-callout: none; /*`-webkit-touch-callout` 這個(gè) 屬性禁用了默認(rèn)的callout展示目溉， callout是指當(dāng)觸摸并按住一個(gè)元素的時(shí)候出現(xiàn)的提示明肮。
當(dāng)在iOS上一直按住一個(gè)目標(biāo)元素時(shí)，Safari會(huì)展示一個(gè)關(guān)于這個(gè)鏈接的callout信息缭付。`webkit-touch-callout`屬性允許禁用掉這一行為
*/
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
8.行內(nèi)標(biāo)簽元素出現(xiàn)間隙問題
.father{
font-size:0;
}
/*方式二：父元素上設(shè)置word-spacing的值為合適的負(fù)值*/
.father{
word-spacing:-2px
}
