1. 滚动条样式设置
The ::-webkit-scrollbar CSS pseudo-element(伪元素) affects the style of the scrollbar of an element
&.show-pushdown {
overflow-x:scroll;
&::-webkit-scrollbar {
width:8px;
height:10px;
background:#aaa;
}
&::-webkit-scrollbar-thumb {
background:#000;
}
}
发现Bug
苹果的滚动条是触摸效果是反的。
参考
2. 去掉苹果给input自动加上的阴影效果
input {
-webkit-appearance: none; /* Gecko内核 */
-moz-appearance: none;/* WebKit/Blink 浏览器内核 */
}
参考
3. 修改placeholder样式
有时候会需要修改input的placeholder样式
为这四个属性设置样式即可：
::-webkit-input-placeholder { /* WebKit browsers */
color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: red;
}
参考资料
4. Chrome font-size最小限制问题
Chrome最小限制font-size为12px。再小的字体也都是12px。
其他浏览器如Firefox无此问题。
参考资料
5. 隐藏video下载标志
问题
Chrome浏览器下使用video元素会自动出现下载标志，但一般不想让用户下载视频。
解决方案
添加这三个样式：
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}