google-chrome - 使用 CSS 或 Jquery 删除搜索字段中的默认 Google Chrome 麦克风图标？

Question

是否可以使用 CSS 或 Jquery 在搜索字段中删除默认的 Google Chrome 麦克风图标？

Answer 1

如果你看一下https://google.com，你会发现驱动麦克风图标的是什么x-webkit-speech=""

我做了一个检查元素并删除了那个位，麦克风图标不再出现。如果您不想在您的网站中显示麦克风，也许您可​​以尝试不包括该x-webkit-speech位？

<input id="gbqfq" class="gbqfif" name="q" type="text" autocomplete="off" value="" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial; " x-webkit-speech="" x-webkit-grammar="builtin:search" lang="en" dir="ltr" spellcheck="false">

Answer 2

另一种选择是使用伪元素来隐藏麦克风图标（这适用于旧版本的 Chrome，我不确定是否x-webkit-speech不再受支持，因为 Chrome 中现在有功能更强大的 Web Speech API）。

每当我需要隐藏图标时，我一直在使用这个 CSS

input::-webkit-input-speech-button {
    display : none;
}

尽管正如该问题的其他答案所暗示的那样，x-webkit-speech如果您不希望显示麦克风，则使用该属性可能没有多大意义。如果您想了解 Web Speech API， HTML5Rocks 在http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API上有一篇很好的文章，其中包括语音合成和语音识别。