CSS修改IOS默认按钮样式
CSS修改IOS默认按钮样式
不知道⼤家在做移动端页⾯的时候有没遇到过在 IOS 端⼀些按钮显⽰和安卓的截然不同，今天下午⼜有⼀个⼩伙在⾥问这个问题。我记得之前我也遇到过，今天给⼤家分享⼀下怎么使⽤ CSS修改IOS的默认样式。
========================================================
⼩⽉博客
W E B
========================================================
第⼀：关于按钮
⾸先这张图是没有⽤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: 1px solid #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;
教师节代表发言稿
}
转载请注明：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。