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个. 本案例都是经本人实测 ...
随机推荐
- Bootstrap 图像
一般的样式 在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前,我们将看到 Bootstrap 3 提供的定义图像的一般的样式. img { border: 0; } 这 ...
- 基于Stm32的MP3播放器设计与实现
原创博文,转载请注明出处 这是我高级电子技术试验课做的作业,拿来共享一下.项目在安福莱例程基础之上进行的功能完善,里面的部分内容可参考安福莱mp3例程.当然用的板子也是安福莱的板子,因为算起来总共做了 ...
- 如何本地测试例如QQ登录等第三方接口
前言:现在基本是个网站就会集成第三方的一些接口,比如QQ登录.分享等等.但是在开发的时候,尤其是没有这方面经验的开发人员来说,调试流程时会显得迷茫,不知道怎么调试.这里就个人的这方面学习摸索做一个总结 ...
- wpf中xps文档合并功能实现
跟着上一篇的xps文档套打的文章,近期一直在研究xps打印技术,其中用户提到了一个需求,要求能够多页面进行打印,我的想法是,先生成xps文件,然后将文件读取出来以后,合并成一个文件来处理. 如果要是直 ...
- [google面试CTCI] 2-3 只给定链表中间节点指针,如何删除中间节点?
[链表] Q:Implement an algorithm to delete a node in the middle of a single linked list, given only acc ...
- 使用 Aspose.Cells 实现 excel导入
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- MongoDB深圳用户组线下活动召集
MongoDB线下用户组是由全世界MongoDB爱好者发起的不定期线下交流活动.目前全球有100多个MongoDB用户组,3万5千多爱好者参与.用户组活动的形式通常会有一到两个MongoDB相关的技术 ...
- KingPaper初探 wamp下本地虚拟主机的搭建
在本地我们进行网站或系统开发时,因为我们本地的地址以localhost为主机名的 我们上传到服务器会有很多东西要修改 为了避免这些不必要的修改,我们可以在本地搭建虚拟主机 一下是在wamp下搭建虚拟 ...
- LNMP安装与配置
Nginx与apache.lighttp性能综合对比,如下图: 注意:关闭rpm默认安装的apache和mysql 1.准备php函数的rpm包 y ...
- linux netstat 命令详解
linux netstat 命令详解 1.功能与说明 netstat 用于显示linux中各种网络相关信息.如网络链接 路由表 接口状态链接 多播成员等等. 2.参数含义介绍 -a (all)显示所 ...