J'insère une icône de recherche dans le champ de saisie du formulaire. Aime ça
<form role="search" method="get" id="searchform" class="searchform" action="http://"> <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search"> </form>
#searchform { position: relative; } #searchform:before { content: "\f118"; font-family: "pharma"; right: 0px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: #387DD8; padding: 10px; color: #fff; width: 60px; }
Mais l'icône n'est pas cliquable. Je veux cliquer sur cette icône comme soumettre le formulaire à cette icône. Comment ajouter ceci?
3 Réponses :
Vous avez besoin d'un champ d'envoi pour soumettre la demande d'obtention.
<form role="search" method="get" id="searchform" class="searchform" action="http://"> <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search"> <input type="submit" id"submit"> </form>
Vous pouvez ensuite appliquer le style sur #submit
au lieu de #searchform:before
<form role="search" method="get" id="searchform" class="searchform" action="http://"> <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search"> <input type="submit" id="submit" value="ð"> </form>
* { box-sizing: border-box; font-family: inherit; } html { font-size: 62.25%; } body { font-family: sans-serif; font-size: 1.6rem; } #searchform { position: relative; width: 500px; display: flex; justify-content: center; align-items: center; } #s { width: 90%; height: 100%; padding: .8rem; border-top-left-radius: .3rem; border-bottom-left-radius: .3rem; border: 1px solid dodgerblue; border-right-color: transparent; } #submit { width: 10%; height: 100%; padding: .8rem; border-top-right-radius: .3rem; border-bottom-right-radius: .3rem; border: 0px; background: dodgerblue; }
Utilisez l ' icône de recherche Font Awesome comme ci-dessous:
p >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <form role="search" method="get" id="searchform" class="searchform" action="http://"> <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search" /> <button type="submit" id="submit"> <i class="fas fa-search"></i> </button> </form>
#searchform { position: relative; } #submit { position: absolute; background: #387DD8; padding: 10px; color: #fff; width: 60px; }
@Sabbir Pas de problème. Bonne chance!
Ouais, je viens de modifier votre code CSS. Certains éléments ne doivent pas être ajoutés.