小效果，大收集

去掉点击后的阴影

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

将a标签做成一个按钮

a {
display: block;
height: 34px;
width: 107px;
line-height: 2;
text-align: center;
background: yellow;
color: #d84700;
font-size: 14px;
font-weight: bold;
text-decoration: none;
padding-top: 3px;
}

使用padding margin时加上

-webkit-box-sizing:border-box;  

 

☆☆去掉input button select 默认样式☆☆

input:disabled {

-webkit-text-fill-color: rgba(0, 0, 0, 1);

-webkit-opacity: 1;

}

去掉button/select的默认按钮样式

appearance:none;

-moz-appearance:none;

-webkit-appearance:none;

 

以下是一些兼容的写法

1.

//Chrome Firefox Opera Safari

input:disabled{

border:1px solid #DDD;

background-color:#F5F5F5;

color:#ACA899;

}

2.

利用属性选择符定义

//IE6 failed

input[disabled]{

border:1px solid #DDD;

background-color:#F5F5F5;

color:#ACA899;

}

3. 利用类来定义

input.disabled{

   border:1px solid #DDD;

   background-color:#F5F5F5;

   color:#ACA899;

}

最终结果：input[disabled],input:disabled{

   border:1px solid #DDD;

   background-color:#F5F5F5;

   color:#ACA899;

}

//IE6 Using Javascript to add CSS class "disabled"

   * html input.disabled{

   border:1px solid #DDD;

   background-color:#F5F5F5;

   color:#ACA899;

}