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的书略读,后记录了标签 ...
随机推荐
- vue.js 调用iOS原生方法,JavaScriptCore
1. 2. 3. 4.vue.js调用
- ggplot2 specific command
# By default, the same scales are used for all panels. You can allow # scales to vary across the pan ...
- 【P2944】地震损失(最大流,洛谷)
绝对难度虚高的一题 看到题目,至少损坏几个房子,开始考虑最小割,建的是双向边,所以拆点,边权除了自己与自己的之外都连inf.然后把所有求救的点都连到超级源上,跑一遍最大流就可以了. #include& ...
- 通过wifi连接android设备的方法
[转自]http://blog.csdn.net/kuanxu/article/details/7444874 最近由于要在另外一台android设备上调试代码,在本机PC上查看其log.两台机器离的 ...
- postman(谷歌) httprequester(火狐)
http://www.cnblogs.com/s380774061/p/4624326.html @an http://www.tuicool.com/articles/67Rnaej 测试文档券栈 ...
- Treflection03_getFields_getField
1. package reflectionZ; import java.lang.reflect.Constructor; import java.lang.reflect.Field; public ...
- 远程调用之RMI、Hessian、Burlap、Httpinvoker、WebService的比较
一.综述 本文比较了RMI.Hessian.Burlap.Httpinvoker.WebService5这种通讯协议的在不同的数据结构和不同数据量时的传输性能. RMI是java语言本身提供的远程通讯 ...
- python学习笔记(接口自动化框架 V1.0)
之前是利用python自带的unittest测试框架 这次自己设计一个 之后再一点点往里面加功能 (ps:当然这个框架真的是很简单..很简单...很简单...) excel文件格式: #!/usr/b ...
- ubuntu16.04 安装OpenNI并运行kinnectfusion
由于OpenNI是ubuntu12.04以前使用的驱动kinnect的库,现在用起来有很多的不便,用心的系统运行旧的设备,有诸多问题.现总结流程如下: 环境:Ubuntu16.04 64bit Kin ...
- Linux常用的50个命令
50个最常用的Unix/Linux命令 2014-08-20 这篇文章翻译自http://www.thegeekstuff.com/2010/11/50-linux-commands/这些都是一些很常 ...