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. vue.js 调用iOS原生方法,JavaScriptCore

    1. 2. 3. 4.vue.js调用

  2. ggplot2 specific command

    # By default, the same scales are used for all panels. You can allow # scales to vary across the pan ...

  3. 【P2944】地震损失(最大流,洛谷)

    绝对难度虚高的一题 看到题目,至少损坏几个房子,开始考虑最小割,建的是双向边,所以拆点,边权除了自己与自己的之外都连inf.然后把所有求救的点都连到超级源上,跑一遍最大流就可以了. #include& ...

  4. 通过wifi连接android设备的方法

    [转自]http://blog.csdn.net/kuanxu/article/details/7444874 最近由于要在另外一台android设备上调试代码,在本机PC上查看其log.两台机器离的 ...

  5. postman(谷歌) httprequester(火狐)

    http://www.cnblogs.com/s380774061/p/4624326.html @an http://www.tuicool.com/articles/67Rnaej 测试文档券栈 ...

  6. Treflection03_getFields_getField

    1. package reflectionZ; import java.lang.reflect.Constructor; import java.lang.reflect.Field; public ...

  7. 远程调用之RMI、Hessian、Burlap、Httpinvoker、WebService的比较

    一.综述 本文比较了RMI.Hessian.Burlap.Httpinvoker.WebService5这种通讯协议的在不同的数据结构和不同数据量时的传输性能. RMI是java语言本身提供的远程通讯 ...

  8. python学习笔记(接口自动化框架 V1.0)

    之前是利用python自带的unittest测试框架 这次自己设计一个 之后再一点点往里面加功能 (ps:当然这个框架真的是很简单..很简单...很简单...) excel文件格式: #!/usr/b ...

  9. ubuntu16.04 安装OpenNI并运行kinnectfusion

    由于OpenNI是ubuntu12.04以前使用的驱动kinnect的库,现在用起来有很多的不便,用心的系统运行旧的设备,有诸多问题.现总结流程如下: 环境:Ubuntu16.04 64bit Kin ...

  10. Linux常用的50个命令

    50个最常用的Unix/Linux命令 2014-08-20 这篇文章翻译自http://www.thegeekstuff.com/2010/11/50-linux-commands/这些都是一些很常 ...