Search code examples
google-chromemicrophone

Remove default Google Chrome microphone icon in search field with CSS or Jquery?


Is it possible to remove the default Google Chrome microphone icon in a search field using CSS or Jquery?


Solution

  • 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">