Inserisci l'icona all'interno dell'elemento di input in un modulo

Come inserisco un'icona all'interno dell'elemento di input di un modulo?

Versione live su: tema della forza di marea

Il sito che hai collegato utilizza una combinazione di trucchi CSS per farlo. Innanzitutto, utilizza un'immagine di sfondo per l' <input>elemento. Quindi, per spostare il cursore sopra, usapadding-left .

In altre parole, hanno queste due regole CSS:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

Le soluzioni CSS pubblicate da altri sono il modo migliore per raggiungere questo obiettivo.

Se ciò dovesse causare problemi (leggi IE6), puoi anche usare un input senza bordi all'interno di un div.

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

Non come "pulito", ma dovrebbe funzionare su browser meno recenti.

Una soluzione senza immagini di sfondo:

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

Puoi provare questo:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

Trovo che questa sia la soluzione migliore e più pulita. Utilizzando text-indent sul inputelemento

CSS:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

Un modo semplice e facile per posizionare un'icona all'interno di un input consiste nell'utilizzare la proprietà CSS position come mostrato nel codice seguente. Nota: ho semplificato il codice a fini di chiarezza.

1. Crea il contenitore che circonda l'input e l'icona.
2. Impostare la posizione del contenitore come relativa
3. Imposta l'icona come posizione assoluta. Ciò posizionerà l'icona relativa al contenitore circostante.
4. Utilizzare in alto, a sinistra, in basso, a destra per posizionare l'icona nel contenitore.
5. Imposta il riempimento all'interno dell'input in modo che il testo non si sovrapponga all'icona.

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}

<div id="input-container">
  <img/>
  <input/>
</div>

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

aggiungi i tag sopra nel tuo file CSS e usa la classe specificata.

Questo funziona per me:

input.valid {
   border-color: #28a745;
   padding-right: 30px;
   background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: right center;
}

<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>

Puoi provare questo: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>

Usa la proprietà background nel tuo CSS.

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

Ho avuto una situazione del genere. Non ha funzionato a causa di background: #ebebeb;. Volevo mettere lo sfondo nel campo di input e quella proprietà veniva costantemente visualizzata nella parte superiore dell'immagine di sfondo, e non riuscivo a vedere l'immagine! Quindi, ho spostato la backgroundproprietà per essere sopra la background-imageproprietà e ha funzionato.

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

La soluzione per il mio caso era:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

Solo per citare, border, paddinge text-alignle proprietà non sono importanti per la soluzione. Ho appena replicato il mio codice originale.

Usando con font-icon

<input name="foo" type="text" placeholder="&#61447;">

O

<input id="foo" type="text" />

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

Ad esempio puoi usare questo: etichetta con input nascosto (icona presente).

utilizzare questa classe CSS per l'input all'avvio, quindi personalizzare di conseguenza:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }

<input class="inp-icon" type="text">

Questo funziona per me per moduli più o meno standard:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>