本文旨在记录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技巧总结的更多相关文章

  1. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  2. 经验分享:多屏复杂动画CSS技巧三则

    当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...

  3. 多屏复杂动画CSS技巧三则(转载)

    本文转载自: 经验分享:多屏复杂动画CSS技巧三则

  4. 网页设计师必备的10个CSS技巧

    CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就 ...

  5. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  6. 20个很有用的CSS技巧

    导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...

  7. 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  8. 最全的CSS浏览器兼容问题【CSS技巧 】

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  9. 10个网页设计师必备的CSS技巧(转)

    英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...

  10. 100个实用的CSS技巧,以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

随机推荐

  1. Bootstrap 图像

    一般的样式 在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前,我们将看到 Bootstrap 3 提供的定义图像的一般的样式. img { border: 0; } 这 ...

  2. 基于Stm32的MP3播放器设计与实现

    原创博文,转载请注明出处 这是我高级电子技术试验课做的作业,拿来共享一下.项目在安福莱例程基础之上进行的功能完善,里面的部分内容可参考安福莱mp3例程.当然用的板子也是安福莱的板子,因为算起来总共做了 ...

  3. 如何本地测试例如QQ登录等第三方接口

    前言:现在基本是个网站就会集成第三方的一些接口,比如QQ登录.分享等等.但是在开发的时候,尤其是没有这方面经验的开发人员来说,调试流程时会显得迷茫,不知道怎么调试.这里就个人的这方面学习摸索做一个总结 ...

  4. wpf中xps文档合并功能实现

    跟着上一篇的xps文档套打的文章,近期一直在研究xps打印技术,其中用户提到了一个需求,要求能够多页面进行打印,我的想法是,先生成xps文件,然后将文件读取出来以后,合并成一个文件来处理. 如果要是直 ...

  5. [google面试CTCI] 2-3 只给定链表中间节点指针,如何删除中间节点?

    [链表] Q:Implement an algorithm to delete a node in the middle of a single linked list, given only acc ...

  6. 使用 Aspose.Cells 实现 excel导入

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. MongoDB深圳用户组线下活动召集

    MongoDB线下用户组是由全世界MongoDB爱好者发起的不定期线下交流活动.目前全球有100多个MongoDB用户组,3万5千多爱好者参与.用户组活动的形式通常会有一到两个MongoDB相关的技术 ...

  8. KingPaper初探 wamp下本地虚拟主机的搭建

    在本地我们进行网站或系统开发时,因为我们本地的地址以localhost为主机名的  我们上传到服务器会有很多东西要修改 为了避免这些不必要的修改,我们可以在本地搭建虚拟主机 一下是在wamp下搭建虚拟 ...

  9. LNMP安装与配置

    Nginx与apache.lighttp性能综合对比,如下图:                           注意:关闭rpm默认安装的apache和mysql 1.准备php函数的rpm包 y ...

  10. linux netstat 命令详解

    linux netstat 命令详解 1.功能与说明 netstat 用于显示linux中各种网络相关信息.如网络链接 路由表  接口状态链接 多播成员等等. 2.参数含义介绍 -a (all)显示所 ...