常用的不易记忆的css自定义代码
在制作页面时,经常会遇到需要自定义一些标签的默认行为(如:input的占位符等),但这些默认的设置的css一般比较难记住,所以有必要自己做一下记录。下面是我经常用到的一些重设默认行为的css。
1、占位符
在<input>
标签中设置placeholder
属性时,有时候因为需求,要修改占位符的默认颜色或者字体大小,这是就可以用下面的css:
// firefox
input::-moz-placeholder {
color: red;
font-size: 18px;
}
// IE
input:-ms-input-placeholder {
color: red;
font-size: 18px;
}
// chrome
input::-webkit-input-placeholder {
color: red;
font-size: 18px;
}
需要注意的是不同浏览器写法不同:
- 都要加上各自浏览器的前缀(如
-webkit-
); - firefox的
placeholder
的前面没有input-
; - firefox与chrome都是
::
两个冒号,而IE则是一个:
; - 低版本的浏览器与新版本浏览器可能写法不同;
2、下拉框的小三角###
select
标签会出现小三角,通常这个小三角我都会去掉,或者用背景图片的方式替换为符合要求的样子。去掉小三角的css:
-webkit-appearance: none;
-moz-appearance: none;
在IE浏览器中目前还没找到可以去掉小三角的方法。
3、input[type=number]右边的spinners###
nput[type=number]
通常用在移动端设备上,浏览器会识别number输入类型,然后改变数字键盘来适应它。但是它会出现spinners,一般不需要它。去掉spinners的css如下:
// firefox
input[type='number'] {
-moz-appearance:textfield;
}
// chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
4、-webkit-tap-highlight-color###
在移动端浏览器上(如微信、QQ内置浏览器),当你点击一个链接或者通过Javascript定义的可点击元素的时候,会出现蓝色边框,我是很讨厌这个边框的,所以一般我会去除:
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
将高亮色设为透明,这样就看不到蓝色边框了。
5、滚动条###
webkit现在支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。有时候需要把滚动条去掉,特别是页面中出现几条滚动条的时候:
::-webkit-scrollbar {
width: 0;
}
设置滚动条的宽度为0就可以去除滚动条了。如果需要自定义滚动条样式可以点击http://www.xuanfengge.com/css3-webkit-scrollbar.html,里面介绍了如何自定义滚动条样式。
上面记录了我在项目中常用的比较不容易记忆的css代码。如果朋友们也有比较常用的不太容易记住的css代码,欢迎帮忙补充。
常用的不易记忆的css自定义代码的更多相关文章
- HBuilder CSS 自定义代码块
=begin 本文档是CSS代码块的编辑文件.注意不要把其他语言的设置放到css里来. HBuilder可使用ruby脚本来编辑代码块和增强操作命令. 1.编辑代码块 如果要新增一个代码块,复制如下一 ...
- vs2015常用代码块与自定义代码块
常用代码块 代码段名 描 述 #if 该代码段用#if和#endif命令围绕代码 #region 该代码段用#region和#endregion命令围绕代码 ~ 该代码段插入一个析构函数 att ...
- Xcode自定义代码块
到现在才发现原来Xcode有自定义代码块这么神奇的功能,能简化很多无聊的敲重复代码的工作,真是感叹我怎么才知道!!! 具体的设置流程见:http://nshipster.cn/xcode-snippe ...
- css初始化代码方案
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候 ...
- Google HTML/CSS/JS代码风格指南
JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...
- CSS Hack代码与浏览兼容总结
关于CSS Hack的东西能少尽量少吧.发现这篇文章我写得太复杂了,所以重新精简了一下,把代码粘贴到jsfiddle上,方面修改代码和维护. 1, IE条件注释法,微软官方推荐的hack方式. 只在I ...
- Django学习之六:Django 常用模块导入记忆
Django 常用模块导入记忆 django相关 1. urls相关操作 from django.urls import path, re_path, include from django.urls ...
- CSS自定义样式
CSS自定义样式 1. 自定义字体 先将字体文件放到web服务器上,需要时自动下载到用户计算机上 属性:@font-face 例: @font-face{ font-family:myFont; sr ...
- pycharm自定义代码片段
pycharm自定义代码片段 目录 (一)通用阶段 0 .新建.py文件模板:2 0 .pycharm中添加自定义代码片段:一图全知道:3 1 .定义类:classin 描述 ...
随机推荐
- 浅析中国剩余定理(从CRT到EXCRT))
前置知识 1. a%b=d,c%b=e, 则(a+c)%b=(d+e)%b(正确性在此不加证明) 2. a%b=1,则(d\(\times\)a)%b=d%b(正确性在此不加证明) 下面先看一道题(改 ...
- 页面缓存优化系列一(expires,cache-control 解读)
参考文章:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control http://caibaojian.com/s ...
- K8s集群安装和检查(经验分享)
一.组件方式检查 1. Master节点: root>> kubectl get cs 2. Node 节点: 无 二.服务方式检查 1. Master 节点: root>> ...
- Linux下安装spf13-vim
前言 spf13-vim是一个集成多个非常好用的vim插件的集合,对于在众多插件中不知道该怎么做选择,并且为各个插件的安装而头疼的我们提供了一个很好的工具,让我仅仅需要安装和配置一次就能拥有众多优秀的 ...
- Home Assistant系列 -- 基于树莓派安装并设置自启动
Home Assistant 是当前智能家居最火热的开源DIY 软件,之前的文章 智能家居系统 Home Assistant 系列 --介绍篇 已经详细介绍过了,这里就不详细介绍了,今天介绍 如何 ...
- CTF-安恒19年二月月赛部分writeup
CTF-安恒19年二月月赛部分writeup MISC1-来玩个游戏吧 题目: 第一关,一眼可以看出是盲文,之前做过类似题目 拿到在线网站解一下 ??41402abc4b2a76b9719d91101 ...
- Executors 挖坑
Executors 挖坑 线程频繁的创建销毁是有代价的,所以Java为我们提供了线程池 线程池构造方法很多 我们一般使用Executors的工厂方法: public static ExecutorSe ...
- C语言数据结构与算法之深度、广度优先搜索
一.深度优先搜索(Depth-First-Search 简称:DFS) 1.1 遍历过程: (1)从图中某个顶点v出发,访问v. (2)找出刚才第一个被顶点访问的邻接点.访问该顶点.以这个顶点为新的顶 ...
- 20155322 《Java程序设计》课堂实践项目MyOD
20155322 <Java程序设计>课堂实践项目MyOD 实践要求 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 提交测试代码和 ...
- # 20155337 2016-2017-2 《Java程序设计》第九周学习总结
20155337 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第16章 JDBC(Java DataBase Connectivity)即java数据库连 ...