跳到主要内容

如何解决 iPhone及iPad下输入框的默认内阴影问题?

参考答案:

在iPhone和iPad上,输入框(如input和textarea)默认会有内阴影,这可能会影响视觉一致性。为了去除这个默认的内阴影,你可以使用CSS的-webkit-appearance属性。

具体来说,你可以将-webkit-appearance属性设置为none,这将去除输入框的默认样式,包括内阴影。但是,这样做可能会导致输入框无法输入。为了解决这个问题,你可以同时设置-webkit-user-select属性为auto,以允许用户输入。

以下是一个示例代码:

input, textarea {
  -webkit-appearance: none;
  -webkit-user-select: auto;
}

这段代码将应用于所有的input和textarea元素,去除它们的默认内阴影并允许用户输入。

请注意,这种方法可能会影响到输入框的其他默认样式,如边框、背景色等。如果你希望保留这些默认样式,你可以单独设置它们。

此外,由于这是针对WebKit浏览器的特定解决方案,它可能不适用于非WebKit浏览器,如Firefox或Safari的非iOS版本。因此,在使用这种方法时,请确保测试你的代码在所有目标浏览器上的表现。