Google Chrome has the following input control:
More info on how to use it can be found here.
I need to make the microphone bigger. It would also be nice if I could use a custom image for the microphone. I found that adjusting the width and height of the input element does not make the microphone larger.
Google Chrome has the following input control:
More info on how to use it can be found here.
I need to make the microphone bigger. It would also be nice if I could use a custom image for the microphone. I found that adjusting the width and height of the input element does not make the microphone larger.
Share Improve this question edited Apr 20, 2012 at 7:59 Vic Fryzel 2,37516 silver badges20 bronze badges asked Apr 20, 2012 at 4:20 Tono NamTono Nam 36.2k84 gold badges326 silver badges492 bronze badges4 Answers
Reset to default 4#speech {
-webkit-transform: scale(4,4)
}
This is what I worked out:
and the html for that is:
<html>
<body>
<img src="Capture.JPG" alt="Smiley face" width="80" style="margin-top:70px; margin-left:120px; position:absolute;" />
<input style="-webkit-transform: scale(8,8); opacity:.001; width:50px; border:none; margin-left:00px; margin-top:100px;" type="text" speech="speech" x-webkit-speech="x-webkit-speech" />
</body>
</html>
anyways now I could use the events:
onspeechchange="processspeech();"
onwebkitspeechchange="processspeech();"
to place the text where appropriate...
Currently, the only way to increase the size of the microphone is to increase the font-size of the input element.
HTML:
<input type="text" id="speech" value="some text here" x-webkit-speech />
CSS:
#speech {
font-size: 20px;
}
For people still looking for this: I managed to style it by setting the opacity of the speech element to 0, then overlaying it with a visible element that you can style yourself. Then I used jQuery to trigger a click on the speech element when you click on your overlayed element :) This way you can even use your own image!
As a note, as far as I know there will be an edited version of the W3C spec for the speech element in the future, that should give developers more control over the look and feel (source: http://www.adobe./devnet/html5/articles/voice-to-drive-the-web-introduction-to-speech-api.html)
In Webkit you can enter the shadow DOM to alter the layout of default browser elements. This is how I did it using a custom icon font from ioon.io (font "Font Awesome" has a nice microphone), but you can of course also use any background image on the input::-webkit-input-speech-button element itself.
input::-webkit-input-speech-button {
-webkit-appearance: none; /* Important to undo default styling. */
height: 100%;
padding: 0 1em;
cursor: pointer;
&:before {
content: '\e601';
font-family: ioon;
}
}