Récemment, j'écris un site Web qui recommande un avocat à la réception. Il y avait un problème dans le boîtier de recherche ci-dessus. Je voulais mettre l'icône de recherche dans la boîte de recherche, mais ce n'était pas très satisfaisant après une longue période ...
Sans plus tarder, allons directement au sujet:
Idées de base
En fait, mettez la boîte d'entrée et l'icône derrière elle dans une div, puis définissez border de la boîte d'entrée sur 0px et définissez enfin border du div sur la bordure extérieure finale
Nous téléchargerons directement le code:
HTML:
<div class = search> <form action = http: //baidu.com> <entrée type = text placeholder = Veuillez saisir l'avocat ou l'expertise que vous avez recherchée> <span> <a href = #> <img src = img / icon1.png alt => </a> </pan> </ form> </v>
CSS:
Voici le style de mise en place de la div entière à l'extérieur
.Search {width: 250px; hauteur: 35px; Border: 1px blanc solide; Border-Radius: 30px;}Voici pour régler la longueur et la largeur de la boîte d'entrée à l'intérieur, le Boder est de 0px, la taille de la police à l'intérieur et la bordure ne sera pas brillante lorsque vous cliquez sur (contour: aucun)
Définissez la transparence ici en utilisant rgba() , la dernière propriété est la transparence (entre 0-1)
entrée {largeur: 200px; hauteur: 35px; bordure: 0; taille de police: 14px; Aperçu: aucun; Color d'arrière-plan: RGBA (255, 255, 255, 0); Couleur: blanc; taille de police: 16px; marge: 0 10px; RésumerIl s'agit de l'article sur le code d'implémentation de HTML ajoutant des icônes dans la boîte d'entrée transparente. Pour plus de contenu d'icône de boîte d'entrée transparent HTML plus connexe, veuillez rechercher des articles précédents sur wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!