テキストボックスの色をGoogleと同じように設定する方法

Question

私はWeb開発を初めて利用しています。下の画像で、テキストボックスとテキストボックスの色を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

は、私はあなたが期待する何を考えての簡単な例です。あなたがすでに持っているものを築いています。

私はマイクのアイコンを見上げていますが、あなたはアイコンをwan'tあなたは

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