How to set the color of the microphone when entering the text "x-webkit-speech"?

Question

Text input has a black background and white ink. (And I plan to save it.) How do I set the color of a webkit microphone image other than black? '-webkit-text-fill-color' will be active only after clicking on the microphone image, which I do not see until it clicks, because it has a black color on a black background.

HTML:

<input type="text" id="sid" x-webkit-speech /> 

CSS

 #sid { color: white; background: black; -webkit-text-fill-color:#ffffff; } 

Here you can check (with gray background): jsfiddle.net/W65Be/

Answer 1

You can add some style to input::-webkit-input-speech-button so that everything you need.

example:

 input::-webkit-input-speech-button { -webkit-appearance: none;width: 50px;height: 30px;background-color: #CCCCCC; } 

* always add -webkit-appearance: none;