背景色や枠線がうまく設定できません

Question

入力フォームの部分を下記の画像のようにしたいのですが、枠線や背景色がうまく設定できずにいます。

コードの方は、コードペンの方に上げさせていただきましたので、そちらからチェック頂けましたら幸いです。
コードペンのURLです
現在は以下の画像のように、枠線のようなものがついてしまい、背景色の白がはみ出してしまっている状態です。

どなたか、教えて頂けましたら幸いです。よろしくお願いします。

Answer 1

枠線は背景色ではなくボーダーだと思います。

#search_box{
  border: none;/* ←追加 */
  background-color:hsla(0,0%,100%,0.125);  
}

これで白線は消えませんでしょうか。

Comments

[newyee]

ご回答くださったように直しましたら、うまく行きました！
ありがとうございました！

Answer 2

背景色✕　ボーダー○ですね

既に解答いただいてますが、border:none;を追加するだけで枠線は消えます。
border-radiusを使うとテキストボックスの形を変えられたりもするのでお試しください。