Supprimer la frontière de la zone de saisie de bootstrap
Je suis entrain de créer un site web en utilisant bootstrap, moins et angulaire, et j'ai été mal toute la journée avec le champ de saisie de la barre de recherche. J'ai essayé d'utiliser le bootstrap d'entrée-groupe avec les deux entrées-groupe-addon et l'entrée-groupe-bouton, mais je ne peux pas semblent être en mesure de supprimer la frontière entre le bouton et l'entrée. En fait, je ne peut pas modifier la frontière à tous. Toutes les suggestions sur comment je pourrais faire cela. Je voudrais que ma zone de recherche ont le même comportement que dans duckduckgo.
Mise à JOUR:
<form role="form" action="results.html" style="padding:30px">
<p class="input-group">
<input type="text" class="form-control" name="q" /> <span class="input-group-addon" style="border-left-width: 0px"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="hidden" name="mode" value="web" />
</p>
C'est donc mon code. Je ne sais pas comment faire un JSFiddle avec elle, de sorte que le bootstrap style est conservé. J'ai aussi essayé de mettre le code html et css à partir de ce lien http://jsfiddle.net/CbGpP/2/ dans mon code et la ligne entre le bouton et l'entrée est encore préservée, ni qu'elle s'allume en vert sur le clic.
- Partagez votre code à l'aide de jsfiddle.net, afin que nous puissions voir votre code en ligne.
Vous devez vous connecter pour publier un commentaire.
Si je vous suis, à droite, puis faire
outline: 0
devrait résoudre votre problème.Si je me trompe, merci de poster quelques photos afin que nous puissions voir votre problème réel et aussi poster les codes de ce que vous avez essayé jusqu'à présent.
EDIT:
Ici est la Violon:
Fondamentalement, vous devez supprimer la bordure droite du champ de texte, bordure gauche de l'icône et la couleur de fond de l'icône.
Ajouté une classe
search-input
dans le champ de texte etsearch-icon
de l'icône.Voici le CSS:
Réglage
border:none;
devrait le faire.Être très bête, dans le index.html j'ai ajouté bootstrap de la feuille de style, puis mon personnalisée et encore bootstrap. La suppression de la dernière ligne résolu tous mes problèmes.
Cette réponse à votre question dans ce lien Bootstrap: Supprimer un champ de formulaire frontière
Fondamentalement, ce que vous avez à faire, il suffit d'ajouter le code css suivant la forme de contrôle de la classe
Après cela, vous obtiendrez la zone de saisie sans frontière.
OU vous pouvez Aussi le faire comme ça
Dans le Bootstrap 4 vous pouvez facilement l'utiliser comme ci-dessous.
Dans Votre cas
La Documentation Officielle
https://getbootstrap.com/docs/4.1/utilities/borders/