语音输入css样式

语音输入的CSS样式可以有很多种选择。以下是一些可能的样式：

/* 激活状态下的样式 */
input:active, 
input:focus {
  /* 边框变色 */
  border-color: #0078ff;
  box-shadow: 0 0 0 1px #0078ff;
}

/* 当语音输入可用时的样式 */
input::-webkit-input-speech-button {
  /* 去掉默认样式 */
  display: none;
}

/* 自定义语音输入按钮 */
.btn-voice {
  /* 按钮位置 */
  position: relative;
  left: -30px;
  /* 按钮样式 */
  width: 20px;
  height: 20px;
  background-color: #0078ff;
  border-radius: 50%;
  /* 阴影效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  /* 文本居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 字体图标 */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: #fff;
  content: "\f130";
}

/* 按钮的 hover 状态 */
.btn-voice:hover {
  cursor: pointer;
  background-color: #0063cc;
}

这些样式可以让输入框在激活状态下显示出明显的边框和阴影效果，并且去掉默认的语音输入按钮，使用自定义的语音输入按钮。其中，自定义按钮使用 Font Awesome 的字体图标，可以在网上下载相应的字体文件并引入。