Color change reminder effect code when the search box/input box in the webpage is clicked to input text

Since everyone has different ways of understanding and saying this, let's first use a picture to explain what the effect of this article is:

This is a search box. The normal style is the above style. When website When visitors mouse over the search box to enter text, it will become the following style, which is more striking.

PS: This thing is purely personal. It uses the pseudo class in css. Firefox, Google and IE11 have passed the test. Other browsers have not been tested. Please understand before using. Upper code.

Html part:

 <div class="ss"> <form action="{$host}zb_system/cmd.php?act=search" method="post" name="frmsearch" id="frmsearch"> <input name="q" id="edtSearch" class="input" size="12" type="text" value="Please enter the keyword" onfocus="this. value='';" onblur="if (this. value=='') {this. value='Please enter the search keyword '}"><input value="Search" name="btnPost" id="btnPost" type="submit"> </form></div>

Css part:

 .nav .ss{position:relative;} .ss #edtSearch{height:30px;width: 240px;border: 1px solid #919191;font-size:14px;background-color: #535353;background-image: url(img/sshui.png);background-repeat: no-repeat;background-position: right 0px;margin-top: 6px;padding-left: 5px;line-height: 30px;color: #919191;} .ss #edtSearch:focus{background-color:#e2e2e2;background-image: url(img/sshui.png);background-repeat: no-repeat;background-position: right -32px;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;height:32px;} .ss #btnPost{cursor:pointer;position:absolute;top:6px;width:30px;height:30px;text-indent:-999em;right: 0px;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;background-color: transparent;}

Use two search icons to make one of your own. If you have any questions, you can exchange them on the comment page of this article.