在制作页面时,经常会遇到需要自定义一些标签的默认行为(如: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;
}

需要注意的是不同浏览器写法不同:

  1. 都要加上各自浏览器的前缀(如-webkit-);
  2. firefox的placeholder的前面没有input-
  3. firefox与chrome都是::两个冒号,而IE则是一个:;
  4. 低版本的浏览器与新版本浏览器可能写法不同;

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自定义代码的更多相关文章

  1. HBuilder CSS 自定义代码块

    =begin 本文档是CSS代码块的编辑文件.注意不要把其他语言的设置放到css里来. HBuilder可使用ruby脚本来编辑代码块和增强操作命令. 1.编辑代码块 如果要新增一个代码块,复制如下一 ...

  2. vs2015常用代码块与自定义代码块

    常用代码块 代码段名 描    述 #if 该代码段用#if和#endif命令围绕代码 #region 该代码段用#region和#endregion命令围绕代码 ~ 该代码段插入一个析构函数 att ...

  3. Xcode自定义代码块

    到现在才发现原来Xcode有自定义代码块这么神奇的功能,能简化很多无聊的敲重复代码的工作,真是感叹我怎么才知道!!! 具体的设置流程见:http://nshipster.cn/xcode-snippe ...

  4. css初始化代码方案

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候 ...

  5. Google HTML/CSS/JS代码风格指南

    JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...

  6. CSS Hack代码与浏览兼容总结

    关于CSS Hack的东西能少尽量少吧.发现这篇文章我写得太复杂了,所以重新精简了一下,把代码粘贴到jsfiddle上,方面修改代码和维护. 1, IE条件注释法,微软官方推荐的hack方式. 只在I ...

  7. Django学习之六:Django 常用模块导入记忆

    Django 常用模块导入记忆 django相关 1. urls相关操作 from django.urls import path, re_path, include from django.urls ...

  8. CSS自定义样式

    CSS自定义样式 1. 自定义字体 先将字体文件放到web服务器上,需要时自动下载到用户计算机上 属性:@font-face 例: @font-face{ font-family:myFont; sr ...

  9. pycharm自定义代码片段

    pycharm自定义代码片段 目录 (一)通用阶段 0 .新建.py文件模板:2 0 .pycharm中添加自定义代码片段:一图全知道:3 1 .定义类:classin              描述 ...

随机推荐

  1. 浅析中国剩余定理(从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(正确性在此不加证明) 下面先看一道题(改 ...

  2. 页面缓存优化系列一(expires,cache-control 解读)

    参考文章:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control http://caibaojian.com/s ...

  3. K8s集群安装和检查(经验分享)

    一.组件方式检查 1. Master节点: root>> kubectl get cs 2. Node 节点: 无  二.服务方式检查 1. Master 节点: root>> ...

  4. Linux下安装spf13-vim

    前言 spf13-vim是一个集成多个非常好用的vim插件的集合,对于在众多插件中不知道该怎么做选择,并且为各个插件的安装而头疼的我们提供了一个很好的工具,让我仅仅需要安装和配置一次就能拥有众多优秀的 ...

  5. Home Assistant系列 -- 基于树莓派安装并设置自启动

    Home Assistant 是当前智能家居最火热的开源DIY 软件,之前的文章  智能家居系统 Home Assistant 系列 --介绍篇  已经详细介绍过了,这里就不详细介绍了,今天介绍 如何 ...

  6. CTF-安恒19年二月月赛部分writeup

    CTF-安恒19年二月月赛部分writeup MISC1-来玩个游戏吧 题目: 第一关,一眼可以看出是盲文,之前做过类似题目 拿到在线网站解一下 ??41402abc4b2a76b9719d91101 ...

  7. Executors 挖坑

    Executors 挖坑 线程频繁的创建销毁是有代价的,所以Java为我们提供了线程池 线程池构造方法很多 我们一般使用Executors的工厂方法: public static ExecutorSe ...

  8. C语言数据结构与算法之深度、广度优先搜索

    一.深度优先搜索(Depth-First-Search 简称:DFS) 1.1 遍历过程: (1)从图中某个顶点v出发,访问v. (2)找出刚才第一个被顶点访问的邻接点.访问该顶点.以这个顶点为新的顶 ...

  9. 20155322 《Java程序设计》课堂实践项目MyOD

    20155322 <Java程序设计>课堂实践项目MyOD 实践要求 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 提交测试代码和 ...

  10. # 20155337 2016-2017-2 《Java程序设计》第九周学习总结

    20155337 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第16章 JDBC(Java DataBase Connectivity)即java数据库连 ...