safari浏览器下 input 表单的阴影

简介: 之前写了一个登录表单页面,再iphone上测试遇到了一些奇怪的问题:表单中的input[type=”submit”]按钮在iPhone的safari浏览器下会出现圆角的情况;input[typ...

之前写了一个登录表单页面,再iphone上测试遇到了一些奇怪的问题:表单中的input[type=”submit”]按钮在iPhone的safari浏览器下会出现圆角的情况;input[type=”text”]文本输入框会有内阴影,这些问题该怎么处理呢?
阴影图片:
阴影图片
正常图片:
正常图片

在IOS下,input 表单默认会有个内阴影,一定程度上影响视觉一致,可通过设置下面代码去掉:

input{
-webkit-appearance: none;
}

如果你还没有碰到,或者你也在开发移动端web,都希望你记住这个小技巧,因为当你在制作中碰到这样的问题时,不会为此抓破头皮,能解决你问题。

目录
相关文章
|
4月前
|
Web App开发 编解码 JavaScript
Safari浏览器不支持……
Safari浏览器不支持……
|
4月前
|
Web App开发 编解码 JavaScript
Safari浏览器不支持let声明的解决方式
Safari浏览器不支持let声明的解决方式
|
4月前
|
Web App开发 移动开发 Android开发
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
|
12月前
|
iOS开发
解决IOS端微信浏览器input,textarea有内上边框阴影
解决IOS端微信浏览器input,textarea有内上边框阴影
58 0
|
前端开发
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
142 0
|
Web App开发 JavaScript iOS开发
iOS Safari 浏览器 100vh 带有滚动条解决方案
iOS Safari 浏览器 100vh 带有滚动条解决方案
579 0
|
Web App开发 JavaScript Android开发
JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题
JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题
404 0
|
Web App开发 前端开发 JavaScript
前端基本开发工具的浏览器之Safari
Safari是一款苹果公司开发的浏览器,它在Mac OS和iOS操作系统上广受欢迎。下面就让我们来看看Safari的特点和优势。
307 0
|
22天前
|
机器学习/深度学习 人工智能 前端开发
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
使用TensorFlow.js在浏览器中进行情感分析是一个非常实用的应用场景。TensorFlow.js 是一个用于在JavaScript环境中训练和部署机器学习模型的库,使得开发者能够在客户端直接运行复杂的机器学习任务。对于情感分析,我们可以使用预先训练好的模型来识别文本中的积极、消极或中性情感。
46 4
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
|
12天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
32 1

热门文章

最新文章

下一篇
DDNS