添加什么样的css 能让按钮在手机中容易点击

html-css038

添加什么样的css 能让按钮在手机中容易点击,第1张

给按钮添加css样式有以下三种方法：1，直接在元素上定义style，如下：<input type="button" style="这里定义样式">2，页面中内嵌样式，如下：<style>.btn{需要添加的样式}</style><input type="button" class="btn">3，外部引用css文件，如下：<link rel="stylesheet" type="text/css" href="这里是css文件的路径">

只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了。 （不要写在class里哦）

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none}

textarea {  -webkit-appearance: none}

如果还有圆角的问题，

.button{ border-radius: 0 }

1、去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus {outline: none}

去掉高光样式：

input:focus{

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

-webkit-user-modify:read-write-plaintext-only}

当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。

2、去除IE10+浏览器文本框后面的小叉叉，只需下面一句就ok了

input::-ms-clear {display: none}

用jquery时时监控手机页面高度，或者添加<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">