禁用矩形（橙色边框），用于Android焦点上的文本输入＆gt; 4.0 Webkit

Question

我正在构建一个具有酷炫搜索输入的Web应用程序。然而，当我点击输入开始输入时，输入框会突出显示蓝色边框，这很好，看起来不错，但除此之外，还有一个带有橙色边框的白色矩形出现在文本输入上，看起来非常糟糕。

我已经尝试了几种解决方案，但没有一种能够解决问题。 （CSS样式解决方案将alpha改为0等。）[但如果你可以让它们在Android 4.0和/或更高版本上工作那么也许我做错了我会再试一次]

其他人说这些解决方案不适用于较新的Android操作系统，这也是我的经验。我个人正在运行Android 4.0.4。

---问题复制---

我的Android应用程序＆amp;原生Android浏览器......

适用于Android的Chrome浏览器... [工作正常！ ]

由于它适用于Chrome，因此必须能够修复。我以为Chrome是开源的，所以我试图找到它们的源代码，这样我就可以找到解决方案。 Android Chrome的来源不可用，因此它不是开源的。

Answer 1

进入google.com，他们的输入没有突出显示。他们所拥有的是：

-webkit-tap-highlight-color: rgba(0,0,0,0);

清除丑陋的橙色，畸形矩形。

Answer 2

您是否尝试将outline样式设置为焦点上的none？你说你已经尝试过css解决方案，但你尝试了什么？

在我看来，焦点的轮廓非常标准，可以用

覆盖

outline: none;
box-shadow: none; /* If this is a box shadow - clear it with this */

Answer 3

re：此修复：

input:focus { -webkit-user-modify: read-write-plaintext-only; }

我在运行4.0.4的s3上测试了这个（我们遇到了与输入字段相关的另一个问题）

这会导致在打开预测文本时文本无法正确填充字段的问题，我不建议使用它。

输入未正确填充字段的问题（在按空格后，只输入您输入的每个单词的第一个字符!!）也是通过在具有绝对位置的元素中输入字段来触发的。

这是我们原始问题的原因 - 可能值得另一个堆栈溢出帖。

Answer 4

我认为这与css / javascript无关。

当我在设备设置中启用“改善Web辅助功能”时，我已经看到了这种行为。

尝试进入您的设备常规设置（不是浏览器的设置），辅助功能，并检查您是否有类似“改善Web辅助功能”的内容（对不起，我的设备语言是法语，我不确定其中的确切名称英语）。

选中此选项后，您会在网页上看到可编辑/可点击内容周围的大橙色边框。