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的书略读,后记录了标签 ...
随机推荐
- Spring AOP(4)
- hi.baidu.com 百度流量统计
在字幕侠的官网访问之后,发现 <meta name="baidu-site-verification" content="3uvZd9Aact" /> ...
- segment fault本质
要谈segment fault,必须要谈指针. 指针的本质是什么?只不过是一种带*的数据类型,其特色有: 1.宽度 2.声明 3.赋值 4.++与-- 5.+与- 6.求差值 7.比较 当声明int ...
- CocoaPods学习系列3——创建和使用私有Pods
前一篇记录了使自己的项目支持CocoaPods管理的过程,核心的步骤就是podspec的配置和提交.这个文件,记录了类库的详细信息,用于对类库的集成. 需要注意的一点,上一篇创建的podspec文件, ...
- 红米手机.驱动.XP安装
1.发现 官网上下载的 驱动在 XP下安装不上去... (Win7 记得 貌似 没有问题...) 1.1.网上搜到的 解决方案为:解决手机不能连电脑 XP系统无法安装MTP设备驱动的终极解决_小米No ...
- 2012 Multi-University Training Contest 7
2012 Multi-University Training Contest 7 A.As long as Binbin loves Sangsang B.Dead or alive C.Dragon ...
- mysql 字段属性 与 排序
mysql中常见的数据类型:varchar(n).float.int(n).bigint(n).date.datetime.text 字段属性 默认值:DEFAULT '默认值' 非空:NOT NUL ...
- mysql 习题
习题1 1.创建一个库(dt55_mysql),在库下创建一张students表 (1)students表中的字段有:id(int类型),stuName(varchar类型),age(int类型),w ...
- List排序共通代码
此共通方法可以根据特定字段进行排序 package com.gomecar.index.common.utils; import java.lang.reflect.Method; import ja ...
- LeetCode OJ:Add Binary(二进制相加)
Given two binary strings, return their sum (also a binary string). For example,a = "11"b = ...