1-31 6,437 views
在移动端safari下，<input type="button" value="test">会被赋予默认的样式，即使定义了background和border-radius等样式，还是不能达到预期效果。
如上的蓝色按钮样式为：
- .ipt{
- width:94%;
- height:2.2rem;
- background:#d8f3ff;
- border:1px solid #0a3d53;
- color:#000;
- font-size:1.2rem;
- font-family:custom;
- margin-top:5%;
- -webkit-box-shadow:2px 2px 2px;
- -moz-box-shadow:2px 2px 2px;
- box-shadow:2px 2px 2px;
- overflow: hidden;
- opacity:0.9;
- border-radius: 5px;
- }
box-shadow和border-radius都与所定义的不一致，background也不是。
但给按钮的样式加一段
- -webkit-appearance:none
清楚默认样式后，效果如下：
阴影和圆角，以及背景色都达到了所设定的效果。