Come posso aggiungere un glifo a una casella di input del tipo di testo? Ad esempio, voglio avere "icon-user" nell'input di un nome utente, qualcosa del genere:
Come posso aggiungere un glifo a una casella di input del tipo di testo? Ad esempio, voglio avere "icon-user" nell'input di un nome utente, qualcosa del genere:
Risposte:
Arriveremo a Bootstrap tra un secondo, ma ecco i concetti CSS fondamentali in gioco per farlo da soli. Come sottolinea la barba della preda , puoi farlo con i CSS posizionando assolutamente l'icona all'interno dell'elemento di input. Quindi aggiungi un'imbottitura su entrambi i lati in modo che il testo non si sovrapponga all'icona.
Quindi per il seguente HTML:
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
È possibile utilizzare i seguenti CSS per allineare i glifi a destra e a sinistra:
/* 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; }
Nota : questo presuppone che tu stia usando i glyphylons , ma funziona ugualmente bene con font-awesome .
Per FA, basta sostituire.glyphicon
con.fa
Come sottolineato dal buffer , ciò può essere realizzato in modo nativo all'interno di Bootstrap utilizzando Stati di convalida con icone opzionali . Questo viene fatto dando .form-group
all'elemento la classe di .has-feedback
e l'icona alla classe di .form-control-feedback
.
L'esempio più semplice sarebbe qualcosa del genere:
<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>
Pro :
Contro :
Per superare i contro, ho messo insieme questa richiesta pull con modifiche per supportare le icone allineate a sinistra. Poiché si tratta di una modifica relativamente grande, è stata rimandata a una versione futura, ma se hai bisogno di queste funzionalità oggi , ecco una semplice guida all'implementazione:
Includi solo queste modifiche al modulo in CSS (anche inline tramite snippet di stack nascosto nella parte inferiore)
* MENO : in alternativa, se stai costruendo via less , ecco le modifiche al modulo in less
Quindi, tutto ciò che devi fare è includere la classe .has-feedback-left
su qualsiasi gruppo che ha la classe .has-feedback
per allineare a sinistra l'icona.
Dal momento che ci sono molte possibili configurazioni HTML su diversi tipi di modulo, diverse dimensioni di controllo, diversi set di icone e diverse visibilità delle etichette, ho creato una pagina di prova che mostra il set corretto di HTML per ogni permutazione insieme a una demo live.
Il suggerimento di PS Frizi di aggiungere
pointer-events: none;
è stato aggiunto al bootstrap
Non hai trovato quello che cercavi ? Prova queste domande simili:
.focusedInput
classe viene definita in seguito .input-group-addon
quando i fogli di stile scendono in sequenza , questi ultimi dovrebbero avere la precedenza. Puoi descrivere meglio lo scenario che ha portato a questo essere un problema?
<i class="icon-user"></i>
a <i class="fa fa-user"></i>
. Ogni volta che stai pensando di aggiornare le librerie esterne, assicurati di leggere le note di rilascio e la nuova documentazione per determinare se la tua app è ancora compatibile o deve essere aggiornata.
Il metodo ufficiale Nessun CSS personalizzato richiesto:
<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/
Questa demo si basa su un esempio nei documenti Bootstrap. Scorri verso il basso fino a "Con icone opzionali" qui http://getbootstrap.com/css/#forms-control-validation
{left:0}
alla classe glyphicon dovrebbe occuparsi dell'allineamento a sinistra. jsfiddle.net/LS2Ek/30 . Mi piace il tuo approccio contorno + box-shadow. Sembra pulito!
left:0
non identifica più l'inizio dell'input. Inoltre, dovrai aggiungere un'imbottitura a sinistra dell'input e rimuoverla a destra. Comunque, una soluzione molto bella e pulita. Penso che identificare la parte sinistra dell'input sia la parte difficile, dove è utile un wrapper con position:relative
.
Ecco un'alternativa solo CSS. Ho impostato questo per un campo di ricerca per ottenere un effetto simile a Firefox (e un centinaio di altre app.)
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;
}
Ecco come l'ho fatto usando solo il bootstrap CSS predefinito v3.3.1:
<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>
Ed ecco come appare:
Questo 'cheat' funzionerà con l'effetto collaterale che la classe glyphicon cambierà il font per il controllo di input.
<input class="form-control glyphicon" type="search" placeholder=""/>
Se vuoi sbarazzarti dell'effetto collaterale puoi rimuovere la classe "glyphicon" e aggiungere il seguente CSS (Potrebbe esserci un modo migliore per dare uno stile allo pseudo elemento segnaposto e ho testato solo su Chrome).
.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";
}
Forse una soluzione ancora più pulita:
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=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
Può essere fatto usando le classi dalla versione 3.x ufficiale di bootstrap, senza alcun CSS personalizzato.
Utilizzare input-group-addon
prima del tag di input, all'interno di input-group
quindi utilizzare uno qualsiasi dei glifi, ecco il codice
<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>
Ecco l'output
Per personalizzarlo, aggiungi un paio di righe di css personalizzate al tuo file custom.css (regola il riempimento se necessario)
.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);
}
Rendendo lo sfondo del input-group-addon
trasparente e portando a zero il gradiente sinistro del tag di input, l'input avrà un aspetto uniforme. Ecco l'output personalizzato
Ecco un esempio di jsbin
Questo risolverà i problemi di css personalizzati di sovrapposizione con etichette, allineamento durante l'utilizzo input-lg
e attenzione al problema delle schede.
Ecco una soluzione non bootstrap che semplifica il markup incorporando la rappresentazione dell'immagine del glifo direttamente nel CSS usando la codifica 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">
Se stai usando Fontawesome puoi farlo:
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
Risultato
L'elenco completo di Unicode è disponibile nel riferimento completo dell'icona The Font Awesome 4.6.3
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">
Ecco un altro modo per farlo posizionando il glyphicon usando lo :before
pseudo elemento nei CSS.
Per questo 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>
Usa questo CSS ( compatibile con i browser basati su Bootstrap 3.xe Webkit )
.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;
}
Come ha detto @Frizi, dobbiamo aggiungere in pointer-events: none;
modo che il cursore non interferisca con il focus di input. Tutte le altre regole CSS servono per centrare e aggiungere la spaziatura corretta.
Il risultato:
Quindi, per aggiungere un'icona utente, basta aggiungere 
l' placeholder
attributo o dove lo si desidera.
Potresti voler controllare questo cheat sheet .
Esempio:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value=" submit-button" style="font-family: 'Glyphicons Halflings', Arial">
Non dimenticare di impostare il carattere dell'input su Glyphicon, usando il seguente codice :,
font-family: 'Glyphicons Halflings', Arial
dove Arial è il carattere del testo normale nell'input.
Ho anche una decisione per questo caso con 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>
Prendi a form-control
e aggiungi is-valid
alla sua classe. Notare come il controllo diventa verde, ma, cosa più importante, notare l'icona del segno di spunta sulla destra del controllo? Questo è ciò che vogliamo!
Esempio:
.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>
Se sei abbastanza fortunato da aver bisogno solo di browser moderni: prova css transform translate translate. Ciò non richiede wrapper e può essere personalizzato in modo da consentire più spazio per l'input [tipo = numero] per accogliere lo spinner di input o spostarlo a sinistra della maniglia.
@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>
Dovresti essere in grado di farlo con le classi bootstrap esistenti e un po 'di stile personalizzato.
<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>
Modifica L'icona viene referenziata tramite la icon-user
classe. Questa risposta è stata scritta al momento della versione 2. di Bootstrap. Puoi vedere il riferimento nella seguente pagina: http://getbootstrap.com/2.3.2/base-css.html#images