Placer l'icône à l'intérieur de l'élément d'entrée dans un formulaire

Comment placer une icône à l'intérieur de l'élément d'entrée d'un formulaire?

Version en direct sur: Thème Tidal Force

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' <input>élément. Ensuite, pour pousser le curseur dessus, 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;

Les solutions CSS publiées par d'autres sont le meilleur moyen d'y parvenir.

Si cela vous pose des problèmes (lire 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 anciens navigateurs.

Une solution sans images d'arrière-plan:

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

Vous pouvez essayer ceci:

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

Je trouve que c'est la solution la meilleure et la plus propre. Utilisation du retrait de texte sur l' inputélément

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 moyen simple et facile de positionner une icône à l'intérieur d'une entrée consiste à utiliser la propriété CSS position comme indiqué dans le code ci-dessous. Remarque: J'ai simplifié le code à des fins de clarté.

1. Créez le conteneur entourant l'entrée et l'icône.
2. Définir la position du conteneur comme relative
3. Définissez l'icône comme position absolue. Cela positionnera l'icône par rapport au conteneur environnant.
4. Utilisez en haut, à gauche, en bas, à droite pour positionner l'icône dans le conteneur.
5. Définissez le remplissage à l'intérieur de l'entrée afin que le texte ne chevauche pas l'icône.

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

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

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>

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>

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

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

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

J'avais une situation comme ça. Cela n'a pas fonctionné à cause de background: #ebebeb;. Je voulais mettre un arrière-plan sur le champ de saisie et cette propriété apparaissait constamment en haut de l'image d'arrière-plan, et je ne pouvais pas voir l'image! J'ai donc déplacé la backgroundpropriété au-dessus de la background-imagepropriété 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, border, paddinget les text-alignpropriétés ne sont pas importantes pour la solution. Je viens de répliquer mon code d'origine.

Utilisation avec font-icon

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

OU

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

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

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">

 <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 cachée (l'icône est présente).

Cela fonctionne pour moi pour des formulaires plus ou moins standard:

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