Ajouter un glyphicon d'amorçage à la zone de saisie

340

Comment ajouter un glyphicon à une zone de saisie de type texte? Par exemple, je veux avoir «icon-user» dans une entrée de nom d'utilisateur, quelque chose comme ceci:

entrez la description de l'image ici

relooking
la source
5
Ceci est ma solution alternative (pour 2014) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Richard Cotrina
en retard à la fête mais consultez ma réponse, je n'utilise que du bootstrap pour obtenir cet effet, et pour changer la couleur et la bordure, j'utilise deux lignes de css. il résout les autres problèmes qui ont été discutés dans la section réponse stackoverflow.com/a/40945821/2914407
Dheeraj

Réponses:

755

Sans Bootstrap:

Nous arriverons à Bootstrap dans une seconde, mais voici les concepts CSS fondamentaux en jeu pour le faire vous-même. Comme le souligne la barbe de proie , vous pouvez le faire avec CSS en positionnant absolument l'icône à l'intérieur de l'élément d'entrée. Ajoutez ensuite un rembourrage de chaque côté pour que le texte ne chevauche pas l'icône.

Donc pour le HTML suivant:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Vous pouvez utiliser le CSS suivant pour aligner les glyphes à gauche et à droite:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Démo dans Plunker

capture d'écran css

Remarque : cela suppose que vous utilisez des glyphicons , mais fonctionne aussi bien avec font-awesome .
Pour FA, remplacez simplement .glyphiconpar.fa


Avec Bootstrap:

Comme le souligne le tampon , cela peut être accompli de manière native dans Bootstrap en utilisant des états de validation avec des icônes facultatives . Cela se fait en donnant à l' .form-groupélément la classe de .has-feedbacket à l'icône la classe de .form-control-feedback.

L'exemple le plus simple serait quelque chose comme ceci:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Avantages :

  • Inclut la prise en charge de différents types de formulaires (de base, horizontal, en ligne)
  • Inclut la prise en charge de différentes tailles de contrôle (par défaut, petit, grand)

Inconvénients :

  • N'inclut pas la prise en charge des icônes d'alignement à gauche

Pour surmonter les inconvénients, j'ai mis en place cette pull-request avec des modifications pour prendre en charge les icônes alignées à gauche. Comme il s'agit d'un changement relativement important, il a été reporté à une version ultérieure, mais si vous avez besoin de ces fonctionnalités aujourd'hui , voici un guide d'implémentation simple:

Il suffit d'inclure ces modifications de formulaire dans CSS (également en ligne via un extrait de pile caché en bas)
* MOINS : alternativement, si vous construisez via moins , voici les modifications de formulaire en moins

Ensuite, tout ce que vous avez à faire est d'inclure la classe .has-feedback-leftdans n'importe quel groupe qui a la classe .has-feedbackafin d'aligner à gauche l'icône.

Puisqu'il y a beaucoup de configurations html possibles sur différents types de formulaires, différentes tailles de contrôle, différents jeux d'icônes et différentes visibilités d'étiquette, j'ai créé une page de test qui montre l'ensemble correct de HTML pour chaque permutation avec une démo en direct.

Voici une démo dans Plunker

capture d'écran des commentaires

La suggestion de PS Frizi d'ajouter pointer-events: none;a été ajoutée au bootstrap

Vous n'avez pas trouvé ce que vous cherchiez ? Essayez ces questions similaires:

Ajout de CSS pour les icônes de rétroaction alignées à gauche

KyleMit
la source
Voir mon montage, j'ai rendu le sélecteur css de focusInput plus explicite, sinon il est écrasé par .input-group-addon.
Michel Müller
@ MichelMüller, je ne suis pas sûr de voir la valeur dans la modification suggérée. La .focusedInputclasse est définie après, .input-group-addondonc lorsque la feuille de style tombe en cascade , ces derniers styles doivent avoir la priorité. Pouvez-vous mieux décrire le scénario qui a conduit à ce problème?
KyleMit
2
Je suggère d'ajouter "pointeur-événements: aucun;" pour les icônes, car par défaut, elles interfèrent avec la mise au point d'entrée.
Frizi
1
@Leandro, c'est sûr! . C'est simplement parce que FontAwesome a introduit des changements de rupture dans la version 4. Si vous souhaitez passer de 3.x à 4.x , vous devez passer <i class="icon-user"></i>à <i class="fa fa-user"></i>. Chaque fois que vous songez à mettre à jour des bibliothèques externes, assurez-vous de lire les notes de publication et la nouvelle documentation pour déterminer si votre application est toujours compatible ou doit être mise à niveau.
KyleMit
1
@Leando, vous pouvez en savoir plus sur les nouvelles conventions de dénomination dans FA 4.0 ainsi qu'un guide de migration complet du 3.21 au 4
KyleMit
62

La méthode officielle . Aucun CSS personnalisé requis:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Cette démo est basée sur un exemple dans les documents Bootstrap. Faites défiler jusqu'à "Avec des icônes facultatives" ici http://getbootstrap.com/css/#forms-control-validation

entrez la description de l'image ici

utilisateur
la source
3
+1 - Certainement agréable d'avoir une approche native intégrée au bootstrap. Bien que cela ne soit pas si chaud à gauche, aligner des icônes comme le demande la question, mais certainement une bonne approche.
KyleMit
1
L'ajout {left:0}à la classe glyphicon devrait prendre soin de l'alignement à gauche. jsfiddle.net/LS2Ek/30 . J'aime bien votre approche contour + boîte-ombre. Ça a l'air bien!
utilisateur
C'est à l'origine ce que je pensais aussi, mais vous allez finir par recréer une grande partie du travail CSS dans différentes situations. Si vous ajoutez une étiquette , vous verrez des problèmes . Sur un formulaire en ligne, left:0n'identifie plus le début de l'entrée. Vous devrez également ajouter un remplissage à gauche de l'entrée et le supprimer à droite. Pourtant, une solution très agréable et propre. Je pense que l'identification de la gauche de l'entrée est la partie difficile, c'est là qu'un wrapper position:relativeest utile.
KyleMit
Vous devez ajouter ce patch au bootstrap. C'est une fonctionnalité pratique et fréquemment utilisée.
utilisateur
43

Voici une alternative CSS uniquement. J'ai configuré cela pour un champ de recherche pour obtenir un effet similaire à Firefox (et une centaine d'autres applications.)

Voici un violon .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}
Beardofprey
la source
+1 excellente solution. Je l'ai adapté dans une classe utilitaire gauche et droite, mais certainement la bonne approche
KyleMit
oui, si simple et tout simplement parfait
PeMa
11

Voici comment je l'ai fait en utilisant uniquement le bootstrap CSS v3.3.1 par défaut:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

Et voici à quoi ça ressemble:

entrez la description de l'image ici

Garry anglais
la source
8

Cette «triche» fonctionnera avec l'effet secondaire que la classe de glyphicon changera la police pour le contrôle d'entrée.

Violon

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Si vous voulez vous débarrasser de l'effet secondaire, vous pouvez supprimer la classe "glyphicon" et ajouter le CSS suivant (il peut y avoir une meilleure façon de styliser le pseudo-élément d'espace réservé et je n'ai testé que sur Chrome).

Violon

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Peut-être une solution encore plus propre:

Violon

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />
greenbender
la source
8

Cela peut être fait en utilisant des classes de la version officielle de bootstrap 3.x, sans CSS personnalisé.

Utilisez input-group-addonavant la balise d'entrée, à l'intérieur input-grouppuis utilisez l'un des glyphicons, voici le code

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Voici la sortie

entrez la description de l'image ici

Pour le personnaliser, ajoutez quelques lignes de CSS personnalisées à votre propre fichier custom.css (ajustez le remplissage si nécessaire)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

En rendant l'arrière-plan du input-group-addontransparent et en mettant le dégradé gauche de la balise d'entrée à zéro, l'entrée aura une apparence transparente. Voici la sortie personnalisée

entrez la description de l'image ici

Voici un exemple jsbin

Cela résoudra les problèmes de CSS personnalisés de chevauchement avec les étiquettes, d'alignement lors de l'utilisation input-lget de se concentrer sur le problème des onglets.

Dheeraj
la source
6

Voici une solution non bootstrap qui maintient votre balisage simple en incorporant la représentation d'image du glyphicon directement dans le CSS en utilisant le codage URI base64.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

mccainz
la source
6

Si vous utilisez Fontawesome, vous pouvez le faire:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Résultat

entrez la description de l'image ici

La liste complète d'Unicode peut être trouvée dans la référence complète de l'icône Font Awesome 4.6.3

Merlin
la source
5

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

Angel Patel
la source
super "jugad" mais cela est vraiment utile pour définir une icône personnalisée également.Merci.
Dhruv Raval
4

Voici une autre façon de le faire en plaçant le glyphicon à l'aide du :beforepseudo-élément en CSS.

Démonstration de travail dans jsFiddle

Pour ce HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Utilisez ce CSS ( Bootstrap 3.x et navigateurs Webkit compatibles )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

Comme l'a dit @Frizi, nous devons ajouter pointer-events: none;afin que le curseur n'interfère pas avec le focus d'entrée. Toutes les autres règles CSS sont destinées au centrage et à l'ajout de l'espacement approprié.

Le résultat:

capture d'écran

Richard Cotrina
la source
2

Vous pouvez utiliser son HTML Unicode

Donc, pour ajouter une icône d'utilisateur, ajoutez simplement &#xe008;à l' placeholderattribut, ou où vous le souhaitez.

Vous voudrez peut-être vérifier cette feuille de triche .

Exemple:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

N'oubliez pas de définir la police de l'entrée sur celle du Glyphicon, en utilisant le code suivant:, font-family: 'Glyphicons Halflings', ArialArial est la police du texte normal dans l'entrée.

Mona Lisa
la source
1

J'ai également une décision pour ce cas avec Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

En entrée, j'ai quelque chose comme ceci: entrez la description de l'image ici

Vitalii Nesterenko
la source
1

Testé avec Bootstrap 4.

Prenez un form-controlet ajoutez is-validà sa classe. Remarquez comment le contrôle devient vert, mais plus important encore, remarquez l'icône de coche à droite du contrôle? Voilà ce que nous voulons!

Exemple:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Igor K
la source
0

Si vous avez la chance de n'avoir besoin que de navigateurs modernes: essayez css transform translate. Cela ne nécessite pas de wrappers et peut être personnalisé afin que vous puissiez autoriser plus d'espacement pour l'entrée [type = nombre] pour accueillir le spinner d'entrée, ou le déplacer vers la gauche de la poignée.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

httpete
la source
0

Vous devriez pouvoir le faire avec les classes d'amorçage existantes et un peu de style personnalisé.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Modifier L'icône est référencée via la icon-userclasse. Cette réponse a été écrite au moment de Bootstrap version 2. Vous pouvez voir la référence sur la page suivante: http://getbootstrap.com/2.3.2/base-css.html#images

YOOOEE
la source
Ne pas voir la référence du glyphicon bootstrap dans cette réponse
Kirby
@Kirby, l'icône est référencée via la classe icon-user. Cette réponse a été écrite au moment de la version 2. de Bootstrap. Vous pouvez voir la référence sur la page suivante - getbootstrap.com/2.3.2/base-css.html#images
YOOOEE