wake-up-neo.net

Fügen Sie das Symbol in das Eingabeelement ein

Wie füge ich ein Symbol in das Eingabeelement eines Formulars ein?

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

Live-Version unter: Tidal Force-Thema

cssformsinputiconselement
216
akif

Die von Ihnen verlinkte Site verwendet eine Kombination von CSS-Tricks, um dies auszuführen. Zunächst wird ein Hintergrundbild für das <input>-Element verwendet. Um den Cursor darüber zu verschieben, wird padding-left verwendet.

Mit anderen Worten, sie haben diese beiden CSS-Regeln:

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

Die CSS-Lösungen, die von anderen bereitgestellt werden, sind der beste Weg, um dies zu erreichen.

Wenn Sie Probleme haben sollten (lesen Sie IE6), können Sie auch eine randlose Eingabe in einem div verwenden.

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

Nicht "sauber", sollte aber mit älteren Browsern funktionieren.

42
harpo

Sie können dies versuchen:

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

Eine Lösung ohne Hintergrundbilder:

#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

Ich finde das die beste und sauberste Lösung dafür. Verwenden Sie text-indent für das Element 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;
}

fügen Sie oben in Ihre CSS-Datei Tags hinzu und verwenden Sie die angegebene Klasse.

8
Rafi Haidari

Verwendung mit dem font-Symbol

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

Verwenden Sie einfach die Hintergrundeigenschaft in Ihrem CSS.

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

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

Sie können dies versuchen: 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

Das funktioniert für mich:

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>

Sie können beispielsweise Folgendes verwenden: Beschriftung mit ausgeblendeter Eingabe (Symbol ist vorhanden).

1
yazabara

Ich hatte eine Situation wie diese. Es hat wegen background: #ebebeb; nicht funktioniert. Ich wollte Hintergrund in das Eingabefeld einfügen und diese Eigenschaft wurde ständig oben auf dem Hintergrundbild angezeigt, und ich konnte das Bild nicht sehen! Also habe ich die background-Eigenschaft so verschoben, dass sie über der background-image-Eigenschaft liegt, und es hat funktioniert.

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

Lösung für meinen Fall war:

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

Um nur zu erwähnen, sind border, padding und text-align Eigenschaften für die Lösung nicht wichtig. Ich habe gerade meinen ursprünglichen Code repliziert.

1
fantja

verwenden Sie diese CSS-Klasse beim Start für Ihre Eingabe und passen Sie sie entsprechend an:

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

0
csandreas1