经常使用的不易记忆的css自定义代码

在制做页面时，常常会遇到须要自定义一些标签的默认行为(如：input的占位符等)，但这些默认的设置的css通常比较难记住,因此有必要本身作一下记录。下面是我常常用到的一些重设默认行为的css。

一、占位符

在<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. 低版本的浏览器与新版本浏览器可能写法不一样；

二、下拉框的小三角

select标签会出现小三角,一般这个小三角我都会去掉，或者用背景图片的方式替换为符合要求的样子。去掉小三角的css：

-webkit-appearance: none;
-moz-appearance: none;

在IE浏览器中目前还没找到能够去掉小三角的方法。

三、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;
}

四、-webkit-tap-highlight-color

在移动端浏览器上(如微信、QQ内置浏览器)，当你点击一个连接或者经过Javascript定义的可点击元素的时候，会出现蓝色边框，我是很讨厌这个边框的，因此通常我会去除：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

将高亮色设为透明，这样就看不到蓝色边框了。

五、滚动条

webkit如今支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。有时候须要把滚动条去掉，特别是页面中出现几条滚动条的时候：

::-webkit-scrollbar {
    width: 0;
}

设置滚动条的宽度为0就能够去除滚动条了。若是须要自定义滚动条样式能够点击http://www.xuanfengge.com/css3-webkit-scrollbar.html，里面介绍了如何自定义滚动条样式。

上面记录了我在项目中经常使用的比较不容易记忆的css代码。若是朋友们也有比较经常使用的不太容易记住的css代码，欢迎帮忙补充。