htmlの中でinputのplaceholderの色を解決して、クリックする時消えて、inputはクリックする時スタイルの問題をクリックします

ブラウザが互換性がない場合は、以下のコードを使用してplaceholderのフォント色などを変更します.

.search-input input::-webkit-input-placeholder{
    color: #000;
}
.search-input input:-moz-placeholder{
    color: #000;
}
.search-input input::-moz-placeholder{
    color: #000;
}
.search-input input:-ms-input-placeholder{
    color: #000;
}

アウトラインを使用してinputをクリックしたときのinput枠線スタイルの変更を制御します

input{
  outline:none;
}

placeholderクリック時にテキストを消すように制御し、離れた後にテキストを再表示し、小さなjsを使えばいい

onfocus="this.placeholder=''" /*           */
onblur="this.placeholder='    '" /*           */

このコードの一部を追加すればいいです.