Все это прекрасно, но случается и такое, что стандартное расположение или внешний вид пиктограммы становится непозволительным в определенном интерфейсе. Для того чтобы стилизовать "микрофон" в файле стилей CSS необходимо использовать специальный псевдоэлемент ::-webkit-input-speech-button.

Небольшое замечание


Описав правила для селектора вы увидите что ничего не изменилось - внешний вид остался прежним. Все это обусловлено тем, что браузер при рендеринге не нашел в стилях правила -webkit-appearance которое бы указывало на то, что стандартный вид элемента использовать не нужно.

Усвоив написанное выше, мы делаем вывод и получаем блок CSS кода для дальнейшего видоизменения атрибута. Выглядит он так:

input::-webkit-input-speech-button {
	-webkit-appearance:none;
	/* something else */
}

В сухом остатке


Возможности стилизации кнопки очень богаты: в полной мере работают псевдоэлементы :before и :after, доступна настройка поведения при наведении (:hover), есть возможность использовать transition, transform, box-shadow, border-radius etc. Иными словами - практически все возможности каскадных таблиц стилей. Но и тут есть одно "но": псевдокласс :focus работать не будет (:active срабатывает).

Демонстрация


Интересное


Mozilla трудиться над внедрением Web Speech: https://wiki.mozilla.org/HTML5_Speech_API

Web Speech API Specifications: https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html#speechreco-methods

JavaScript манипуляции с webkitSpeech объектом: http://www.xiper.net/learn/javascript/web-speech-api/znakomstvo-web-speech-api.html