web-dev-qa-db-fra.com

Placer l'icône dans l'élément d'entrée dans un formulaire

Comment insérer une icône dans l'élément d'entrée d'un formulaire?

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

Version live à: Thème de la force de la marée

cssformsinputiconselement
216
akif

Le site que vous avez lié utilise une combinaison d'astuces CSS pour y parvenir. Tout d'abord, il utilise une image d'arrière-plan pour l'élément <input>. Ensuite, pour déplacer le curseur, il utilise padding-left.

En d'autres termes, ils ont ces deux règles CSS:

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

Les solutions CSS publiées par d’autres constituent le meilleur moyen d’y parvenir.

Si cela vous pose des problèmes (lisez IE6), vous pouvez également utiliser une entrée sans bordure à l'intérieur d'un div.

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

Pas aussi "propre", mais devrait fonctionner sur les navigateurs plus anciens.

42
harpo

Vous pouvez essayer ceci:

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

Une solution sans images de fond:

#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
majid savalanpour

Je trouve cela la solution la meilleure et la plus propre. Utilisation de text-indent sur l'élément 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;
}

ajoutez les balises ci-dessus dans votre fichier CSS et utilisez la classe spécifiée.

8
Rafi Haidari

Utiliser avec 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
Ali Göksel Bektaş

Utilisez simplement la propriété background dans votre CSS.

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

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

Vous pouvez essayer ceci: 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

Cela fonctionne pour moi:

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>

Par exemple, vous pouvez utiliser ceci: étiquette avec entrée masquée (une icône est présente).

1
yazabara

J'ai eu la situation comme ça. Cela n'a pas fonctionné à cause de background: #ebebeb;. Je voulais mettre du fond sur le champ de saisie et cette propriété apparaissait constamment en haut de l'image de fond, et je ne pouvais pas voir l'image! J'ai donc déplacé la propriété background au-dessus de la propriété background-image et cela a fonctionné.

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 solution pour mon cas était:

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;
}

Il suffit de mentionner que les propriétés border, padding et text-align ne sont pas importantes pour la solution. Je viens de reproduire mon code d'origine.

1
fantja

utilisez cette classe css pour votre entrée au début, puis personnalisez-la en conséquence:

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

0
csandreas1