苹果手机清除input和按钮默认样式

文章描述:

在制作网页input文本框和button按钮后,在苹果手机上会发现按钮样式和安卓手机还有在电脑端看到的样式不一样,那么怎么处理呢?


1、那么我们先写一个文本框和一个按钮,然后给文本框设置宽度、高度、内边距、边框颜色

.input{ padding:10px 5px; border:1px solid #d4d4d4; width:160px; height:20px;}
.btn{ width:80px; height:40px; background:#00AAEE; border:0px; border-radius:5px; color:#fff;}

完成以后预览会在苹果手机看到以下效果:

按钮有渐变色和边框有大约45度的圆角,我们没有设置按钮边框圆角度数和按钮背景颜色为什么会出现这种状况呢?

是因为苹果会给按钮设置默认背景颜色和边框圆角度数,那么怎么清除苹果手机默认样式,这时需要我们自定义设置按钮和文本框属性:

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
button{border-radius:0px;-webkit-border-radius:0px;}

当我们设置完属性后,会发现效果和安装手机、电脑上效果一样了。

发布时间:2021/08/12

发表评论