为 Android > 4.0 Webkit 的焦点上的文本输入禁用矩形（橙色边框）答案

【问题标题】：Disable rectangle (orange border) for text input on focus for Android > 4.0 Webkit为 Android > 4.0 Webkit 的焦点上的文本输入禁用矩形（橙色边框）
【发布时间】：2023-03-07 10:01:01
【问题描述】：

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

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

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

---问题的复制---

我的 Android 应用程序和原生 Android 浏览器 ...

适用于 Android 的 Chrome 浏览器 ... [ 运行良好！ ]

既然它在 Chrome 中工作，那么它必须可以修复。我曾认为 Chrome 是开源的，所以我试图找到他们的源代码，以便找到解决方案。 Android Chrome 的源代码不可用，因此它不是开源的。

【问题讨论】：

标签： android google-chrome webview webkit android-4.0-ice-cream-sandwich

【解决方案1】：

深入 google.com，他们的输入没有亮点。他们所拥有的是：

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

这清除了丑陋的橙色畸形矩形。

【讨论】：

【解决方案2】：

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

在我看来，它就像一个非常标准的焦点轮廓，可以被覆盖

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

【讨论】：

这是您实施的建议 -- jsfiddle.net/TKKm4/33 但对于我的 Android 应用程序或原生 Android 浏览器仍然无效。可能它是在 android 应用程序级别生成的。我的应用确实导入了 webkit，我是否需要更改该库中的某些内容？
找到解决方案--- input:focus { -webkit-user-modify: read-write-plaintext-only; }
雨果·斯科特-斯莱德：谢谢。阅读其他答案，但只有您的建议从我的输入标签中删除了橙色框。超级。

【解决方案3】：

re：此修复：

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

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

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

输入未正确填充字段的问题（在您按下空格后仅输入您键入的每个单词的第一个字符！！）也由在具有绝对定位的元素中包含输入字段触发..

这是我们最初问题的原因 - 可能值得再发一篇堆栈溢出帖子。

【讨论】：

【解决方案4】：

我认为这与 css/javascript 无关。

当我在设备设置中启用“提高 Web 可访问性”时，我已经看到了这种行为。

尝试进入您的设备常规设置（不是浏览器的设置）、辅助功能，并检查您是否有类似“提高 Web 辅助功能”之类的内容（抱歉，我的设备语言是法语，我不确定在英文）。

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

【讨论】：