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

Question

Comment mettre une icône dans l'élément de saisie d'un formulaire ?

Version en direct sur : Thème Force de marée

Answer 1

Le site que vous avez lié utilise une combinaison de tours CSS pour retirer ceci. Tout d'abord, il utilise un fond d'image pour l'élément <input>. Puis, afin de pousser le curseur au-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;

Answer 2

Les solutions CSS publiées par d'autres sont la meilleure façon d'y parvenir.

Si cela devrait vous donner des problèmes (lire IE6), vous pouvez également utiliser une entrée à l'intérieur d'une marge div.

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

Non comme « propre », mais devrait fonctionner sur les anciens navigateurs.

Answer 3

Vous pouvez essayer ceci:

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

Answer 4

Une solution sans fond-images:

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

Answer 5

Je trouve cela la meilleure et la plus propre solution. En utilisant 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" />

Answer 6

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

ajouter des balises ci-dessus dans votre fichier CSS et utiliser la classe spécifiée.

Answer 7

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>

Answer 8

Il suffit d'utiliser la propriété d'arrière-plan dans votre CSS.

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

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

Answer 9

Utilisation avec-icône de police

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

Answer 10

J'ai eu ce genre de situation. Il ne fonctionne pas à cause de background: #ebebeb;. Je voulais mettre sur fond le champ de saisie et que la propriété était constamment apparaître sur le haut de l'image d'arrière-plan, et je ne pouvais pas voir l'image! Alors, je me suis déplacé la propriété background au-dessus de la propriété background-image et ça a marché.

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

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, propriétés padding et text-align ne sont pas importants pour la solution. Je viens répliqués mon code d'origine.

Answer 11

Vous pouvez essayer ceci : Bootstrap-4 bêta
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>





Answer 12

Une façon simple et facile à positionner une icône à l'intérieur d'une entrée est d'utiliser la propriété CSS position comme indiqué dans le code ci-dessous. Note:. J'ai simplifié le code à des fins de clarté

1. Créer le conteneur entourant l'entrée et l'icône.
2. Régler la position du récipient par rapport
3. Définissez l'icône en position absolue. Cela positionnera l'icône par rapport au conteneur environnant.
4. Utilisez soit en haut, à gauche, en bas, à droite à la position de l'icône dans le récipient.
5. Régler le rembourrage intérieur de l'entrée de sorte que le texte ne se chevauchent 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>

Answer 13

 <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 (icône est)

Answer 14

Cette classe css pour votre entrée au début, puis personnaliser 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">