概述：无;不工作 - 只有-webkit-appearance：none;工作 - 这里有什么问题？

Question

编辑：我关注的是移动网站。

让我明白一点。无论我做什么，概述：无;不会使用Ipod Touch / Iphone从输入表单元素中删除任何默认突出显示/发光。

我看到的每个地方，人们都说要使用：

input:focus {
outline:none;
}

或

input {
outline:none;
}

....并且这将消除发光....好吧它没有。

另一个主要问题是没有默认的亮点。我创建了一个没有样式和表单输入的空白​​页面，通过IOS mobile查看页面，输入元素上没有发光/轮廓......它只是空白。

唯一有效的方法是使用-webkit-appearance：none; - 这只是允许我在输入元素上设置一个box-shadow。如果我没有使用-webkit-appearance：none; - 然后盒子阴影将无法正常显示。

但是，当在桌面浏览器上查看时，即使没有webkit，框阴影也能正常工作。

所以我的问题是：为什么概述：无;对输入元素没有用处？我看到有些人说他们只使用锚标签，但也有人说他们在输入元素上工作。谁在这？因为到目前为止，无论我做什么，概述：无;在输入元素上毫无价值。

这是一个JSfiddle：

http://jsfiddle.net/QQGnj/4/show/

在iOS手机上查看此页面，开始时没有“发光”或默认样式。每个人都看到默认的发光行为需要大纲：无;工作（它没有）？这让我很生气！

Answer 1

如果您使用outline:none;，请添加焦点样式。请参阅http://outlinenone.com/。

当不使用鼠标时，此功能非常有用。大纲提供了一个重要的辅助功​​能，因此，如果您必须删除它，请为链接焦点和活动状态添加一个样式。请帮助用户了解链接的存在位置。

Answer 2

试试这个： -webkit-tap-highlight-color：rgba（0,0,0,0）;

Answer 3

使用-webkit-appearance: none;

#yourElement:focus {
    -webkit-appearance: none;
}

#yourElement:hover {
    -webkit-appearance: none;
}

它会起作用。

Answer 4

Mobile Safari显然没有默认的outline样式，因此您不必担心它。为了保证所有浏览器，桌面和移动设备的一致外观，我建议不管怎样设置outline: none。

Answer 5

a, :visited{ 
    outline: 0;
    outline: none;
}
:hover, :active, :focus{
    outline: 0;
    outline: none;
}

在Chrome / osx，iphone / mobile safari，firefox / osx上为我移除了聚焦光晕 http://jsfiddle.net/toniehock/QQGnj/6/show

Answer 6

在我的Magento2中，它是边框和阴影，而不是上面的这些东西。