textarea默认值

CSS修改IOS默认按钮样式

不知道⼤家在做移动端页⾯的时候有没遇到过在IOS端⼀些按钮显⽰和安卓的截然不同，今天下午⼜有⼀个⼩伙在群⾥问这个问题。

我记得之前我也遇到过，今天给⼤家分享⼀下怎么使⽤CSS修改IOS的默认样式。

========================================================

⼩⽉博客

WEB

========================================================

第⼀：关于按钮

⾸先这张图是没有⽤CSS做任何修饰的样式：

然⽽我们希望的是这样⼦的：

所以我们就要⽤我们的CSS来装饰⼀下喽。

只要在样式⾥⾯加⼀句去掉css去掉iPhone、iPad的默认按钮样式就可以了！~

input[type="button"],input[type="submit"],input[type="reset"]{

-webkit-appearance:none;

}

textarea{-webkit-appearance:none;

}

如果还有圆⾓的问题，

.button{border-radius:0;}

第⼆：关于表单

我们在写表单的时候会发现⼀些浏览器对表单赋予了默认的样式，如在Chorme浏览器下，⽂本框及下拉选择框当载⼊焦点时，都会出

现发光的边框，并且在⽕狐及⾕歌浏览器下，多⾏⽂本框textarea还可以⾃由拖拽拉⼤，另外还有在IE10下，当⽂本框输⼊内容后，在⽂本

框的右侧会出现⼀个⼩叉叉，等等。不容置疑，这些效果是在⽤户体验上得到了提升，但有些时候我们并不需要这些默认的样式，那怎么办

呢？下⾯我们就来分别看⼀下解决办法。

<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;

}

当然这样以来，当⽂本框载⼊焦点时，所有浏览器下的⽂本框的边框都不会有颜⾊上及样式上的变化了，但我们可以重新根据⾃⼰的需

要设置⼀下，如：

input:focus,textarea:focus{

outline:none;

border:1pxsolid#f60;

}

这样的话，当⽂本框载⼊焦点时，边框颜⾊就会变为橙⾊，给⽤户⼀个反馈。

<1>、去除IE10+浏览器⽂本框后⾯的⼩叉叉

只需下⾯⼀句就ok了

input::-ms-clear{

display:none;

}

3、禁⽌多⾏⽂本框textarea拖拽

这样按下⾯添加属性多⾏⽂本框就不能拖拽放⼤缩⼩了：

textarea{

resize:none;

}

在这⾥要提到⼀个属性resize，这个是CSS3属性，⽤于元素缩放，它可以取以下⼏个值：

none默认值

both允许⽔平⽅向及垂直⽅向缩放

horizontal只允许⽔平⽅向缩放

vertical只允许垂直⽅向缩放

不仅可以针对textarea元素，对⼤多数元素都适⽤，如div等，在这⾥不⼀⼀列举，但与textarea不同的是，对div使⽤时需要加上⼀句

overflow:auto;，也就是这样才有效果：

div{

resize:both;

overflow:auto;

}

转载请注明：