Как настроить цвет микрофона при вводе текста «x-webkit-speech»?

Question

Текст ввода имеет черный фон и белый цвет чернил. (И я планирую сохранить это.) Как я могу установить цвет изображения микрофона веб-набора кроме черного? '-webkit-text-fill-color' будет активен только после того, как я нажму на изображение микрофона, которое я не вижу до щелчка, потому что оно имеет черный цвет на черном фоне.

HTML:

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

CSS:

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

Вы можете проверить здесь (с серым фоном): jsfiddle.net / W65Be /

Answer 1

Вы можете добавить стиль к input::-webkit-input-speech-button, это все, что вам нужно.

пример:

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

* всегда добавляйте -webkit-appearance: none;