常用的不易记忆的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;
}

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

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

input[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 ，里面介绍了如何自定义滚动条样式。

6. 只在一侧或者两侧具有投影

.box-shadow {
    background-color: #AC92EC;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

<div class="box-shadow"></div>

7. 渐变背景动画效果

从CSS3开始，动画变得非常的酷了，但是切不可过分的使用它们。下面这一技巧巧妙地的移动背景位置，使其看起来像动画一样：

.btn {
    padding: 15px;
    background-image: linear-gradient(#FC6E51, #FFF);
    background-size: auto 200%;
    background-position: 0 100%;
    -webkit-transition: background-position 0.5s;
       -moz-transition: background-position 0.5s;
         -o-transition: background-position 0.5s;
        -ms-transition: background-position 0.5s;
            transition: background-position 0.5s;
}    
.btn:hover {
    background-position: 0 0;
}

<button type="button" class="btn">你好，中国</button>

8. 将文本分成多列

.cols {
    width: 100%;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

<div class="cols">跑步、动感单车这些有氧运动是比较有效的减脂方式，但是每次不仅时间久，而且过程枯燥，很容易产生疲惫感和倦怠感。结束之后累得对人生都绝望了，很容易中途放弃或者产生“你拿走的我都要吃回来”的冲动，所以需要绝对的毅力和决心。近几年大热的 HIIT也是一种减肥塑身的好选择。HIIT 全名是 High-intensity Interval Training, 只要符合“高强度+间歇”两个条件就可以成为HIIT。快慢跑交替，冲刺游泳和常速游泳交替，或者在家里跟着 HIIT操课一起练，只要有想法，都可以动起来~</div>

9. 像出版物一样，第一个字变得大些

p:first-child::first-letter{
  font-family: "papyrus";
  font-size: 28px;
  font-weight: bold;
}

<p>春天要来啦，身上的小肉肉要藏不住了，是时候开启减肥大业了</p>

10. 创建模糊文本

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

<p class="blurry-text">春天要来啦，身上的小肉肉要藏不住了，是时候开启减肥大业了</p>

11. 高亮选中的 input

// HTML
<input id="mycheck1" type="checkbox" />
<label for="mycheck1">Check box label here</label>
<br />
<input id="mycheck2" type="checkbox" checked/>
<label for="mycheck2">Check box label here</label>
<br />
<input id="mycheck3" type="checkbox" />
<label for="mycheck3">Check box label here</label>
// CSS
input:checked + label{
    background: yellow;  
}

12. 简单但好看的引用样式

//CSS
blockquote {
    background:#f9f9f9;
    border-left:10px solid #ccc;
    margin:1.5em 10px;
    padding:.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
    color:#ccc;
    content:open-quote;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
}
blockquote p {
    display:inline;
}
//HTML
<blockquote cite="http://www.jianshu.com/p/e52c53515d35">
    <p>春天要来啦，身上的小肉肉要藏不住了，是时候开启减肥大业了</p>
</blockquote>

13. chrome表单自动填充去掉input黄色背景解决方案

如果是纯色背景

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px 更改为自己想要的颜色 inset;
}

如果是透明或图片背景最好禁用chrome自动保存密码功能

<input type="text" onfocus="this.type='password'" autocomplete="off" />

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