Custom speech input button?

Question

I am trying to create a button that can pop up the speech input panel (in HTML5), and I tried to use <label> for that:

<label>
    <input type="text" x-webkit-speech />
    ​<button>Speak</button>
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

http://jsfiddle.net/DerekL/XzD2U/

But it only focus on the <input> D: And that is not I wanted to do.
Any suggestion? (it does not have to support IE nor Firefox, just Google Chrome)

Added

This is what I want it to be: http://jsfiddle.net/DerekL/RWCJR/
but I want to use a real button instead of this fake <input> button.

Answer 1

You are pretty limited in what you can accomplish. What you are after isn't possible. The only way to trigger the speech is to click on that microphone icon in the textbox. If you are willing to use javascript then I think you might be able to cram something in. This is how I would do it.

1. Create a text input that is only large enough to contain the microphone icon
2. Use a transform to make it button sized
3. Make it transparent and overlay it on a real button
4. When the invisible microphone is clicked, use javascript to copy the new value into your real text field.

http://jsfiddle.net/Lu3Vb/

You can see in this example how I hacked it together. There are two buttons, one with the microphone overlayed completely transparent, and one with it partially transparent and a red border so that you can see the effect.

CSS

input.speechbutton {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    height: 20px;
    width: 20px;
    margin-left: 30px;
    -webkit-transform: scale(3.0, 1.0);
}

HTML

<div style="position: relative;">
    <button>Speech</button>
    <input class="speechbutton" type="text" value="" x-webkit-speech />
</div>