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);
}
CSS冷门但有用的知识整合的更多相关文章
- 7:CSS Sprites的原理(图片整合技术)
7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...
- CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- HTML+CSS中的一些小知识
今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...
- css\html布局及部分知识小分享~~~
近期发现和总结的知识跟大侠们分享,请大侠们多多评论指教一二? HTML 1.(1)body需设置页面默认字体大小 body{font-size:12px;} (2)IE6下png图片划过切换失效,建 ...
- java ee,包括js,html,jsp等等知识整合
为了方便修改和后续的包装套路 首先用户访问的页面从web.xml找到 <welcome-file-list> <welcome-file>index.html</we ...
- css中很有用的属性
有些css属性很实用,但不常用也就被忘记. 这里纪录了自己在项目中用过的一些. html,body{ -webkit-tap-highlight-color:transparent; } 这个的用途是 ...
- 精通CSS version2笔记2.小知识
添加背景:background-img:url(URL)+属性; 圆角框:选择器{border-radius:单位;}创建X单位的圆角框在元素周围 投影:box-shadow:垂直和水平偏移.投影的宽 ...
- Div+Css(一)必备知识
我只积累我不知道的 参考链接 http://www.kwstu.com/ArticleView/divcss_201442291125960 http://www.kwstu.com/ArticleV ...
- Html和Css学习笔记-html基础知识
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
随机推荐
- MessageFormat与占位符使用
占位符替换,花括号中为索引占位,对应可变参数后面的值 String pattern = "ErrorMessage=This is Error Message : {0},{1}" ...
- jvm-内存区域与内存溢出异常
内存区域与内存溢出异常 参考: http://www.cnblogs.com/ityouknow/p/5610232.html 所有的Java开发人员可能会遇到这样的困惑?我该为堆内存设置多大空间呢? ...
- CODE FESTIVAL 2015 決勝(部分)
CODE FESTIVAL 2015 決勝(部分) B - ダイスゲーム 题意: 给\(N\)个\(6\)个面骰子,然后问掷到概率最大的点数是多少. 分析: 随便打表随便发现是\(\huge\left ...
- tomcat深入学习—权限篇
如果想给一个应用程序配置权限,可能需要的代码量很多,但你知道吗,仅通过配置tomcat,就能有同样的效果(为一个web应用添加了权限) 效果:打开http://localhost:8080/searc ...
- Mac安装搭建sublimeText3开发Nodejs环境
原文] [基本环境 安装Nodejs 这个直接就可以去官网下载就可以了.Nodejs官网 根据自己的PC系统类型选择对应的版本下载之后就可以了. 安装SublimeText3 这个也是直接去Subli ...
- hdu 5768 Lucky7 中国剩余定理+容斥+快速乘
Lucky7 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem D ...
- FM算法 的总结
FM的总结: 1.FM算法与线性回归相比增加了特征的交叉.自动选择了所有特征的两两组合,并且给出了两两组合的权重. 2.上一条所说的,如果给两两特征的组合都给一个权重的话,需要训练的参数太多了.比如我 ...
- HTTP和HTTPS的区别和联系
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂 ...
- jenkins的Master/Slave模式
一. Master/Slave模式 分担jenkins服务器的压力,任务分配到其它执行机来执行 Master:Jenkins服务器 Slave:执行机(奴隶机).执行Master分配的任务,并返回任务 ...
- 第七届蓝桥杯C-B-10-最大比例/gcd变形
最大比例 X星球的某个大奖赛设了M级奖励.每个级别的奖金是一个正整数.并且,相邻的两个级别间的比例是个固定值.也就是说:所有级别的奖金数构成了一个等比数列.比如:16,24,36,54其等比值为:3/ ...