css技巧总结
本文旨在记录css中比较特殊的属性的用法,先按项目的时间顺记录,以后再整理。
a,input,button,select,textarea{
outline:none;
-webkit-tap-highlight-color: rgba(0,0,0,0); /* 去掉点击元素时产生的背景或边框和高亮 */
}
2.
input::-ms-clear {/* 去掉ie自带的input删除功能 */
display:none;
}
3.
*.disabled,
*[disabled] {/*添加disabled属性使元素不可点击*/
pointer-events: none;
cursor: not-allowed;
}
4.
select {/* 去除下拉框样式 */
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {/* ie浏览器去除下拉框样式 */
display: none;
}
5.去除chrome下input输入框等黄色背景
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
6.修改placeholder颜色
/*修改placeholder颜色*/
input::-webkit-input-placeholder {
color: #f5f5f5 !important; /* WebKit browsers */
}
input:-moz-placeholder {
color: #f5f5f5 !important; /* Mozilla Firefox 4 to 18 */
}
input::-moz-placeholder {
color: #f5f5f5 !important; /* Mozilla Firefox 19+ */
}
input:-ms-input-placeholder {
color: #f5f5f5 !important; /*Internet Explorer 10+ */
}
7.设置滚动条样式,主要用在移动端
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track,::-webkit-scrollbar-corner {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #525558;
}
8.让页面在Native端滚动时模拟原生的弹性滚动效果
.target{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
css技巧总结的更多相关文章
- CSS技巧-rgba函数的妙用
先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...
- 经验分享:多屏复杂动画CSS技巧三则
当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...
- 多屏复杂动画CSS技巧三则(转载)
本文转载自: 经验分享:多屏复杂动画CSS技巧三则
- 网页设计师必备的10个CSS技巧
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就 ...
- 应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...
- 20个很有用的CSS技巧
导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...
- 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...
- 最全的CSS浏览器兼容问题【CSS技巧 】
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
- 10个网页设计师必备的CSS技巧(转)
英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...
- 100个实用的CSS技巧,以及遇见的问题和解决方案。
前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个. 本案例都是经本人实测 ...
随机推荐
- 《剑指Offer》面试题-重建二叉树
题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7 ...
- ScriptCase升级到7.01
今天打开ScriptCase的开发环境,发现有新的升级,联网自动升级后,发现已经升级到7.01版本. 7.01版本对界面进行了优化,菜单和图标均以立体的形式进行展现. 不过粗粗看了一下,翻译还是有很多 ...
- SharePoint SPHierarchyDataSourceControl+SPTreeView
今天使用SPHierarchyDataSourceControl和SPTreeView来显示SharePoint文档库层级结构的过程中,发现一直在报下面的错误: The target 'ctl00$c ...
- cubie两种固定MAC地址的方法
1.修改 /etc/init.d/networking 配置文件 在(a)代码的后面添加上(b)这段代码 (a)case "$1" in start) :5e #MAC地址可改 2 ...
- Sublime中开发Ruby
Ruby:Sublime中开发Ruby需要注意的Encoding事项 目录 背景Sublime相关默认的文件存储编码:UTF8默认的输出控制台编码:UTF8修改默认的输出控制台编码Ruby相关默认的代 ...
- Oracle PLSQL笔记(过程的创建和及调用)
过程(procedure): 用于在数据库中完成特定的操作或者任务.是一个PLSQL程序块,可以永久的保存在数据库中以供其他程序调用. 一.创建所需的表USERS create table users ...
- Python:Python学习总结
Python:Python学习总结 背景 PHP的$和->让人输入的手疼(PHP确实非常简洁和强大,适合WEB编程),Ruby的#.@.@@也好不到哪里(OO人员最该学习的一门语言). Pyth ...
- ios学习笔记(一)之Object-C
一:Objective-C语言基础 二:Objective-C类与继承和协议 一:Objective-C语言基础: 1.1)#import 包含头文件 与#include 作用相同 1.2)Obje ...
- Linux操作系统学习_操作系统是如何工作的
实验五:Linux操作系统是如何工作的? 学号:SA1****369 操作系统工作的基础:存储程序计算机.堆栈(函数调用堆栈)机制和中断机制 首先要整明白的一个问题是什么是存储程序计算机?其实存储程序 ...
- 图像资源Images Assets
图像资源Images Assets 开始之前,首先回顾一下iOS7初体验(1)——第一个应用程序HelloWorld中的一张图,如下所示: 本文便分享一下Images.xcassets的体验~_~ 1 ...