Código de implementación HTML para agregar iconos en el cuadro de entrada transparente

Recientemente estoy escribiendo un sitio web que recomienda un abogado de la recepción. Había un problema en el cuadro de búsqueda anterior. Quería poner el ícono de búsqueda en el cuadro de búsqueda, pero no fue muy satisfactorio después de mucho tiempo ...

Sin más preámbulos, vamos directamente al tema:

Ideas básicas

De hecho, coloque el cuadro de entrada y el ícono detrás de él en un DIV, luego establezca border del cuadro de entrada en 0px, y finalmente establezca border del DIV en el borde exterior final

Subiremos el código directamente:

HTML:

 <div class = search> <form de acción = http: //baidu.com> <input type = text placeHolder = Por favor ingrese el abogado o experiencia que buscó> <span> <a href =#> <img src = img/icon1.png alt => </a> </span> </form> </div>

CSS:

Aquí está el estilo de establecer todo el Div afuera

 .Search {ancho: 250px; Altura: 35px; borde: 1px blanco sólido; Border-Radius: 30px;}

Aquí está para establecer la longitud y el ancho del cuadro de entrada en el interior, el Boder es 0px, el tamaño de la fuente dentro y el borde no será brillante cuando se haga clic (Esquema: Ninguno)

Establezca transparencia aquí usando rgba() , la última propiedad es la transparencia (entre 0-1)

 entrada {ancho: 200px; Altura: 35px; borde: 0; tamaño de fuente: 14px; Esquema: ninguno; Color de fondo: RGBA (255, 255, 255, 0); Color: blanco; tamaño de fuente: 16px; margen: 0 10px;

Este es el artículo sobre el código de implementación de HTML agregando iconos en el cuadro de entrada transparente. Para obtener un contenido de icono de caja de entrada transparente HTML más relacionado, busque artículos anteriores de Wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!