HTML implementation code to add icons in transparent input box

Recently I am writing a website that recommends a lawyer to the front desk. There was a problem in the search box above. I wanted to put the search icon in the search box, but it was not very satisfactory after a long time...

Without further ado, let's go straight to the topic:

Basic ideas

In fact, 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 will upload the code directly:

HTML:

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

CSS:

Here is the style of setting 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 inside, the boder is 0px, the font size inside, and the border will not be bright when clicked (outline:none)

Set transparency here using rgba() , the last property is transparency (between 0-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;

This is the article about the implementation code of HTML adding icons in the transparent input box. For more related html transparent input box icon content, please search for previous articles from Wulin.com or continue to browse the related articles below. I hope everyone will support Wulin.com in the future!