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个. 本案例都是经本人实测 ...
随机推荐
- wcf契约随记
1.wcf契约分为:服务契约,操作契约,消息契约.数据契约 -------------------服务契约: [ServiceContract( Name = "name_IUser&quo ...
- 【值得收藏】数据分析和可视化软件IDL的学习资料汇编【可免费下载】
IDL学习教程 IDL 是一种数据分析和图像化应用程序及编程语言,最初在七十年代后期用于帮助科学家分析火星探险卫星发回的数据.此后,IDL得到广泛运用,使用者日众.IDL能使用户可以迅速且方便地运用此 ...
- swfupload多文件上传[附源码]
swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示.这次我们演示利用swfupload多文件上传,项 ...
- Helper Method
ASP.NET MVC 小牛之路]13 - Helper Method 我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 Sys ...
- JavaScript事件的几个细节
JavaScript事件的几个细节 一.是捕获还是冒泡 昨天被问到一个问题:事件流有几个阶段?在这几个阶段中,事件一共发生几次? 问题很简单,但对于事件一共发生几次有点乱.总觉得捕获也能触发事件.冒泡 ...
- Mobile页面项目总结
项目过去个把月了,一直没有写些东西总结下,这次借着年后的空隙,将当时记录下来的几个点回顾一下. 今明的布局:position技巧 每当看到类似横向并排布局的时候,总是想起定宽浮动,和下面讲到的列表并排 ...
- 获取Portal中POWL程序的APPLID
获取Portal中POWL程序的APPLID 今天做练习的时候跟 Leader 学了一招,当不知道集成在 Portal 中 POWL 程序的 APPLID 的时候,可以在类 CL_POWL_MODEL ...
- 推荐前端开发使用的服务器环境开源项目 D2Server 可替代Apache
攻欲善其事,必先利其器.前端开发,编辑器我们有了Sublime Text2,配置Server环境用……你可能会选择Apache,为什么呢?因为能供选择的选项实在太少.而现在,我向大家推荐一个针对前端开 ...
- 新软件马上就要完成了,先发篇文章YY下
最近一直都在搞网站抓取方面的开发,闲着无聊逛逛论坛,发现有些帖子还是写的相当不错的,只是一篇一篇的点进去比较麻烦,于是就写了个小软件只是为了方便查看博客园和CSDN上的优秀文章.其实这个还可以拓展的, ...
- continue与break
1.continue语句,1至20内奇数累加和 #include<iostream> using namespace std; void main(){ int i=0; int sum= ...