之前写了一个登录表单页面，再iphone上测试遇到了一些奇怪的问题：表单中的input[type=”submit”]按钮在iPhone的safari浏览器下会出现圆角的情况；input[type=”text”]文本输入框会有内阴影，这些问题该怎么处理呢？
阴影图片：
正常图片：
在IOS下，input 表单默认会有个内阴影，一定程度上影响视觉一致，可通过设置下面代码去掉：
input{
-webkit-appearance: none;
}
如果你还没有碰到，或者你也在开发移动端web，都希望你记住这个小技巧，因为当你在制作中碰到这样的问题时，不会为此抓破头皮，能解决你问题。
之前写了一个登录表单页面，再iphone上测试遇到了一些奇怪的问题：表单中的input[type=”submit”]按钮在iPhone的safari浏览器下会出现圆角的情况；input[type=”text”]文本输入框会有内阴影，这些问题该怎么处理...
var copyText = function (text) {
// 数字没有 .length 不能执行selectText 需要转化成字符串
var textString = text.toString();
var
input
= document.querySelector(‘#copy-
input
’);
if (!
input
) {
input
= document.createElement(‘
input
’);
input
.id = “copy-
input
”;
//
input
.readOnly = true; // 防止ios聚焦触发键盘事件
$(‘#copy-
input
’).at
Safari
中
input
textarea 去除
阴影
很长时间以来，我一直在用boostrap框架写东西，没有注意到
safari
中
input
和textarea的
阴影
，一直以为是bootstrap中定义的。
今天才知道原来不是，是
safari
内部定义的。
当你想把网页做的十分精致的时候，往往任何部件都需要自己重新定义一下，就比如说这个
阴影
。
参考 http://www.css88
在iPhone的
Safari
中发现了这个问题，line-height 属性不能使
input
输入框中的光标垂直居中，总会有偏移量。查找资料之后发现要换一写法。
height= padding + font-size; 这样通过padding方式达到的居中效果没有问题。如果高度是30px，字体大小是16px，设置line-height和字体大小相同，计算得上下内边距是7px。
input
{
切图网用户体验团队QUX在手机移动触屏web前端开发中碰到一个问题 — 纯css3定义的按钮在android安卓系统下显示正常，但是在苹果ios系统下，以ipad为例，ipad下呈现渐变和圆角状态 。 而css3中根本没有定义这些样式，那么问题来了，这个样式从哪里来？追溯到这个源头，问题就可以迎刃而解。于是翻阅大量文档资料。终于查到：
原来iPhone上的
safari
解析
input
[type...
在IOS下，
input
和textarea
表单
默认会有个内
阴影
，一定程度上影响视觉一致，可通过设置下面代码去掉：
input
{
-webkit-appearance: none;
转载于:https://www.cnblogs.com/c-l-m/p/7699009.html...
您可以使用以下代码在 iOS 内置
浏览器
中打开
Safari
浏览器
：
<a href="https://www.apple.com/
safari
/">在
Safari
中打开</a>
或者使用 JavaScript：
window.location.href = "https://www.apple.com/
safari
/";
