如何设置文本框颜色像谷歌一样

Question

我是网络开发的新手。如何将文本框和文本框颜色设置为与下图中的Google颜色相似？

这是我的代码：

.venu{
  width: 150px;
  box-sizing: border-box;
  border: 2px  ridge #dadada;
  border-radius: 2px;
  font-size: 16px;
  background-color: white;
  background: url(2.png) top right no-repeat;
  background-position:right;
  background-size: 14px;
  padding: 15px 20px 20px 45%;
  position:fixed;
  top:51%;
  bottom:60%;
  left:30%;
  margin: auto;
}

<input type="text" class="venv">

Answer 1

这是我认为你期望的一个简单例子。它正在建立你已经拥有的东西。

我只是查了一个麦克风图标，但你可以随意使用你想要的任何图标

.venu {
  width: 400px;
  height: 40px;
  box-sizing: border-box;
  border: 2px  ridge #dadada;
  border-radius: 3px;
  font-size: 16px;
  padding:10px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.venu:focus {
  box-shadow: 1px 1px 10px 0.5px gray;
  outline: none;
}

img {
  width:25px;
  position:fixed;
  left: 360px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

img:hover {
  transform:scale(1.05);
  cursor:pointer;
}

<input type="text" class="venu"><img src="https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/speaker-512.png">