特殊
yuhuo2022-03-07CssCss属性
数字输入框
谷歌浏览器
/* 隐藏增减按钮 */
input[type="number"] {
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
}
火狐浏览器
/* 隐藏增减按钮 */
input[type="number"] {
-moz-appearance: textfield;
}
滚动条
谷歌浏览器
.box {
/* 滚动条 */
&::-webkit-scrollbar {
/* ios下隐藏滚动条，设置宽高为0是无效的，需要设置 display: none; */
display: none;
height: 10px;
width: 10px;
border-radius: 5px;
background: #dddddd;
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #666666;
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
border-radius: 5px;
background: #dddddd;
}
/* 滚动条两端按钮 */
&::-webkit-scrollbar-button {
width: 10px;
height: 10px;
border-radius: 5px;
background: #0099ff;
}
}
火狐浏览器
.box {
/* 滚动条宽度，取值：auto 默认，thin 细的，none 隐藏滚动条 */
scrollbar-width: none;
/* 滚动条颜色：<滚动条滑块颜色> <滚动条轨道颜色>*/
scrollbar-color: #666666 #dddddd;
}
IE浏览器
.box {
/* 隐藏滚动条 */
-ms-overflow-style: none;
/* 三角箭头的颜色 */
scrollbar-arrow-color: #666666;
/* 滚动条滑块的颜色 */
scrollbar-face-color: #666666;
/* 滚动条阴影色 */
scrollbar-shadow-color: #666666;
/* 滚动条轨道颜色 */
scrollbar-track-color: #666666;
}
文本尺寸调整
IOS微信浏览器
html {
text-size-adjust: 100% !important;
}
安卓微信浏览器
(function() {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();