CSS冷門但有用的知識整合

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

蘋果的滾動條是觸摸效果是反的。

參考

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

2. 去掉蘋果給input自動加上的陰影效果

input {
  -webkit-appearance: none; /* Gecko內核 */
  -moz-appearance: none;/* WebKit/Blink 瀏覽器內核 */
}

參考

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

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

參考資料

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

4. Chrome font-size最小限制問題

Chrome最小限制font-size爲12px。再小的字體也都是12px。

其餘瀏覽器如Firefox無此問題。

參考資料

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

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