HTML code to add icons to transparent input box

I was recently writing a lawyer recommendation website, and there was a problem with the search box. I wanted to put the search icon inside the search box, but after a lot of work, I still couldn't get it to work...

Without further ado, let's get straight to the point:

Basic idea

In fact, just put the input box and the icon behind it in a div, then set border of the input box to 0px, and finally set border of the div to the final outer border

We directly go to the code:

HTML:

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="Please enter the lawyer or expertise you are looking for">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:

Here is the style for the entire div outside

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

Here is to set the length and width of the input box, the frame is 0px, the font size inside, and the border will not light up when clicked (outline:none)
To set the transparency, use rgba() . The last attribute is the transparency (between 0 and 1).

input {
    width: 200px;
    height: 35px;
    border: 0;
    font-size: 14px;
    outline: none;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    font-size: 16px;
    margin: 0 10px;

Summarize

This is the end of this article about the implementation code of adding icons in HTML transparent input box. For more relevant html transparent input box icon content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!