outline - 大纲：无；不工作 - 只有 -webkit-appearance:none; 正在工作 - 这里有什么问题？

Question

编辑：我担心的是移动网站。

让我直奔主题。不管我做什么，大纲：无；不会使用 Ipod Touch/Iphone 从输入表单元素中删除任何默认突出显示/发光。

我到处看，人们说要使用：

input:focus {
outline:none;
}

或者

input {
outline:none;
}

....这将消除辉光....好吧，它没有。

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

唯一有效的是使用 -webkit-appearance:none; - 这只是让我在输入元素上设置一个盒子阴影。如果我不使用 -webkit-appearance:none; - 那么盒子阴影将无法正确显示。

然而，当在桌面浏览器上查看时，即使没有 webkit，盒子阴影也能正常工作。

所以我的问题是：为什么大纲：无；对输入元素没有任何作用？我看到有些人说他们只在锚标签上工作，而另一些人说他们在输入元素上工作。谁在这里？因为到目前为止，无论我做什么，大纲：无；在输入元素上毫无价值。

这是一个JSfiddle：

在 iOS 移动设备上查看此页面，一开始没有“发光”或默认样式。每个人都在哪里看到需要轮廓的默认发光行为：无；工作（它不工作）？这让我发疯！

score 7 · Accepted Answer

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

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

score 7 · Accepted Answer

7

试试这个：-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

于 2013-02-28T15:10:05.660 回答

score 3 · Accepted Answer

利用-webkit-appearance: none;

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

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

它会成功的。

score 1 · Accepted Answer

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

score 1 · Accepted Answer

1

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

于 2020-11-03T13:55:09.043 回答

score 0 · Accepted Answer

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

6 回答 6