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

CSS冷门但有用的知识整合的更多相关文章

  1. 7:CSS Sprites的原理(图片整合技术)

    7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...

  2. CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  3. HTML+CSS中的一些小知识

    今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...

  4. css\html布局及部分知识小分享~~~

    近期发现和总结的知识跟大侠们分享,请大侠们多多评论指教一二?  HTML 1.(1)body需设置页面默认字体大小 body{font-size:12px;} (2)IE6下png图片划过切换失效,建 ...

  5. java ee,包括js,html,jsp等等知识整合

    为了方便修改和后续的包装套路   首先用户访问的页面从web.xml找到 <welcome-file-list> <welcome-file>index.html</we ...

  6. css中很有用的属性

    有些css属性很实用,但不常用也就被忘记. 这里纪录了自己在项目中用过的一些. html,body{ -webkit-tap-highlight-color:transparent; } 这个的用途是 ...

  7. 精通CSS version2笔记2.小知识

    添加背景:background-img:url(URL)+属性; 圆角框:选择器{border-radius:单位;}创建X单位的圆角框在元素周围 投影:box-shadow:垂直和水平偏移.投影的宽 ...

  8. Div+Css(一)必备知识

    我只积累我不知道的 参考链接 http://www.kwstu.com/ArticleView/divcss_201442291125960 http://www.kwstu.com/ArticleV ...

  9. Html和Css学习笔记-html基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

随机推荐

  1. MessageFormat与占位符使用

    占位符替换,花括号中为索引占位,对应可变参数后面的值 String pattern = "ErrorMessage=This is Error Message : {0},{1}" ...

  2. jvm-内存区域与内存溢出异常

    内存区域与内存溢出异常 参考: http://www.cnblogs.com/ityouknow/p/5610232.html 所有的Java开发人员可能会遇到这样的困惑?我该为堆内存设置多大空间呢? ...

  3. CODE FESTIVAL 2015 決勝(部分)

    CODE FESTIVAL 2015 決勝(部分) B - ダイスゲーム 题意: 给\(N\)个\(6\)个面骰子,然后问掷到概率最大的点数是多少. 分析: 随便打表随便发现是\(\huge\left ...

  4. tomcat深入学习—权限篇

    如果想给一个应用程序配置权限,可能需要的代码量很多,但你知道吗,仅通过配置tomcat,就能有同样的效果(为一个web应用添加了权限) 效果:打开http://localhost:8080/searc ...

  5. Mac安装搭建sublimeText3开发Nodejs环境

    原文] [基本环境 安装Nodejs 这个直接就可以去官网下载就可以了.Nodejs官网 根据自己的PC系统类型选择对应的版本下载之后就可以了. 安装SublimeText3 这个也是直接去Subli ...

  6. hdu 5768 Lucky7 中国剩余定理+容斥+快速乘

    Lucky7 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem D ...

  7. FM算法 的总结

    FM的总结: 1.FM算法与线性回归相比增加了特征的交叉.自动选择了所有特征的两两组合,并且给出了两两组合的权重. 2.上一条所说的,如果给两两特征的组合都给一个权重的话,需要训练的参数太多了.比如我 ...

  8. HTTP和HTTPS的区别和联系

    超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂 ...

  9. jenkins的Master/Slave模式

    一. Master/Slave模式 分担jenkins服务器的压力,任务分配到其它执行机来执行 Master:Jenkins服务器 Slave:执行机(奴隶机).执行Master分配的任务,并返回任务 ...

  10. 第七届蓝桥杯C-B-10-最大比例/gcd变形

    最大比例 X星球的某个大奖赛设了M级奖励.每个级别的奖金是一个正整数.并且,相邻的两个级别间的比例是个固定值.也就是说:所有级别的奖金数构成了一个等比数列.比如:16,24,36,54其等比值为:3/ ...