google-chrome - CSSまたはJqueryを使用して検索フィールドのデフォルトのGoogleChromeマイクアイコンを削除しますか？

Question

CSSまたはJqueryを使用して、検索フィールドのデフォルトのGoogle Chromeマイクアイコンを削除することはできますか？

Answer 1

If you look at https://google.com, you will see that what drives the microphone icon is x-webkit-speech=""

I did an inspect element and removed that bit and the microphone icon no longer shows up. If you do not want to show the microphone in your website, perhaps you can try not including the x-webkit-speech bit?

<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

もう1つのオプションは、疑似要素を使用してマイクアイコンを非表示にすることです（これは古いバージョンの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に優れた記事があります。これには、音声合成と音声認識が含まれます。