Question

Google Chrome具有以下输入控件：

enter image description here

有关如何使用它的更多信息，请访问here。

我需要让麦克风更大。如果我可以使用麦克风的自定义图像也会很好。我发现调整输入元素的宽度和高度不会使麦克风变大。

Answer 1

#speech {
  -webkit-transform: scale(4,4)
}

这就是我的成果：

，html就是： enter image description here

<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>

现在我可以使用这些事件：

 onspeechchange="processspeech();"  
 onwebkitspeechchange="processspeech();"

将文本放在适当的位置......

Answer 2

目前，增加麦克风大小的唯一方法是增加输入元素的font-size。

HTML：

<input type="text" id="speech" value="some text here" x-webkit-speech />

CSS：

#speech {
  font-size: 20px;
}

Answer 3

对于仍然在寻找这个问题的人：我设法通过将speech元素的不透明度设置为0来设置样式，然后将其覆盖为可以自己设置样式的可见元素。然后当你点击你的叠加元素时，我使用jQuery来触发对语音元素的点击:)这样你甚至可以使用你自己的图像！

作为一个注释，据我所知，将来会有一个针对语音元素的W3C规范的编辑版本，这应该让开发人员能够更好地控制外观（来源：http://www.adobe.com/devnet/html5/articles/voice-to-drive-the-web-introduction-to-speech-api.html）

Answer 4

在Webkit中，您可以输入shadow DOM来更改默认浏览器元素的布局。这就是我使用icomoon.io中的自定义图标字体（字体“Font Awesome”有一个漂亮的麦克风）的方式，但你当然也可以使用input::-webkit-input-speech-button元素本身的任何背景图像。 / p>

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: icomoon;
  }
}

如何设置Google Chrome语音输入控件的麦克风样式

4 个答案: