it-swarm.it

Metti l'icona all'interno di un elemento di input in un modulo

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

Screenshot of a web form with three inputs which have icons in them

Versione live a: Tidal Force theme

216
akif

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

In altre parole, hanno queste due regole CSS:

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

Le soluzioni CSS pubblicate da altri sono il modo migliore per farlo.

Se questo dovesse darti qualche problema (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.

42
harpo

Puoi provare questo:

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

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>

21

Trovo che questa sia la soluzione migliore e più pulita. Usare text-indent sull'elemento input

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" />
21
Rust
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

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

8
Rafi Haidari

Utilizzo con font-icon

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

OR

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

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

Basta usare la proprietà background nel tuo CSS.

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

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

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>

3
Hasan

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>

3
Gxzzin
 <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 è possibile utilizzare questo: etichetta con input nascosto (icona è presente).

1
yazabara

Ho avuto una situazione come questa. Non ha funzionato a causa di background: #ebebeb;. Volevo mettere lo sfondo sul campo di input e quella proprietà veniva costantemente mostrata in cima all'immagine di sfondo, e non riuscivo a vedere l'immagine! Quindi, ho spostato la proprietà background per essere sopra la proprietà background-image 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, le proprietà border, padding e text-align non sono importanti per la soluzione. Ho appena replicato il mio codice originale.

1
fantja

usa questa classe css come input per iniziare, quindi personalizza di conseguenza:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }
<input class="inp-icon" type="text">

0
csandreas1