CSS冷门但有用的知识整合

时间 2019-12-12

标签 css 冷门有用知识整合栏目 CSS 繁體版

原文原文链接

1. 滚动条样式设置

The ::-webkit-scrollbar CSS pseudo-element(伪元素) affects the style of the scrollbar of an elementcss

&.show-pushdown {
  overflow-x:scroll;

  &::-webkit-scrollbar {
      width:8px;
      height:10px;

      background:#aaa;
  }
  &::-webkit-scrollbar-thumb {
    
    background:#000;
  }
}

发现Bug

苹果的滚动条是触摸效果是反的。html

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbarhtml5

2. 去掉苹果给input自动加上的阴影效果

input {
  -webkit-appearance: none; /* Gecko内核 */
  -moz-appearance: none;/* WebKit/Blink 浏览器内核 */
}

参考

http://cn.ft.com/m/marketing/estate_20171123.htmlweb

3. 修改placeholder样式

有时候会须要修改input的placeholder样式chrome

为这四个属性设置样式便可：浏览器

::-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;
}

参考资料

https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-cssapp

4. Chrome font-size最小限制问题

Chrome最小限制font-size为12px。再小的字体也都是12px。ide

其余浏览器如Firefox无此问题。字体

参考资料

http://blog.csdn.net/freshlover/article/details/9746821.net

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);  
}