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. [BZOJ1823]满汉全席

    Description 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉全席,而 ...

  2. ThinkPHP3.2添加scws中文分词

    前言 前一段时间,公司网站做站内搜索,只简单针对输入的文字进行搜索,作全匹配检索,搜索出来的内容很少.如何达到模糊搜索,匹配到更多的内容成了需要解决的问题.于是,今天想到可以做分词检索,如何对输入的一 ...

  3. Maven到底是个啥玩意

    Maven,是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 上面是百度百科对Maven的正式介绍,如果你是Maven初学者,我估计你看完之后心中肯 ...

  4. js 小复习1

    1.数组 增删改查 , , , , ]; // arr.push(18); // 添加数组后面 更改长度 // arr.unshift(12); // 添加数组前面 // arr.pop(); // ...

  5. angular-messages.js信息验证的使用

    ngMessages(1.3+) 众所周知,表单和验证是Angular中复杂的组件之一.上面的例子不是特别好,不简洁.在Angular 1.3发布前,表单验证必须以这种方式编写.然而在发布的Angul ...

  6. python中sorted()函数的用法

    一. 定义 sorted()函数对所有可迭代的对象进行排序操作 二. 语法 sorted(iterable [, key[, reverse]]]) iterable:可迭代对象 key:主要是用来进 ...

  7. 如何批量更改linux文件的内容

    在工作当中,我们往往需要修改某个文件夹下面所有文件的内容,例如把里面的日期统一替换成新的日期,或者把某一串字符替换成另外一串字符,这时我们就可以使用sed命令: sed -i "s/olds ...

  8. 利用pycharm远程调试openstack代码

    1.安装pycharm专业版 本文安装pycharm 2016.2.3专业版.网上教程较多,这里不做详细介绍,只要到pycharm官网上下载应用程序进行安装即可. 2.pycharm配置 (1)首先按 ...

  9. Lucene快速入门

    1. 什么是lucene lucene是Apache的一个全文检索工具,使用lucene能快速实现全文检索功能.Lucene是一个工具包,你可以调用它的函数, 但它不能独立运行,不单独对外提供服务. ...

  10. Drools7.0.0.Final Unsupported major.minor version 52.0异常

    异常信息 在使用Drools7.0.0.Final版本进行开发过程中,出现以下异常: java.lang.UnsupportedClassVersionError: org/kie/api/KieSe ...