概述:无; 不工作 - 只有-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

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