Giriş formunun içine bir forma simge yerleştirme

Bir formun giriş öğesinin içine nasıl simge koyabilirim?

Canlı versiyon: Tidal Force teması

Bağladığınız site, bunu çekmek için bir CSS hilesi kombinasyonu kullanıyor. İlk olarak, <input>öğe için bir arka plan resmi kullanır . Ardından, imleci üzerine itmek için kullanılır padding-left.

Başka bir deyişle, şu iki CSS kuralına sahiptirler:

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

Başkaları tarafından gönderilen CSS çözümleri bunu başarmanın en iyi yoludur.

Bu size herhangi bir sorun verirse (IE6'yı okuyun), div içinde kenarlıksız bir giriş de kullanabilirsiniz.

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

"Temiz" olarak değil, eski tarayıcılarda çalışmalıdır.

Arka plan resimleri olmayan bir çözüm:

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

Bunu deneyebilirsiniz:

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

Bunu en iyi ve en temiz çözüm olarak görüyorum. Kullanımı metin girinti üzerinde inputeleman

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

Bir Simgeyi bir girişin içine yerleştirmenin basit ve kolay bir yolu, aşağıdaki kodda gösterildiği gibi CSS konumu özelliğini kullanmaktır. Not: Açıklık amacıyla kodu basitleştirdim.

1. Girdiyi ve simgeyi çevreleyen bir kap oluşturun.
2. Kap konumunu göreceli olarak ayarlama
3. Simgeyi mutlak konum olarak ayarlayın. Bu, simgeyi çevresindeki kaba göre konumlandırır.
4. Simgeyi kaba yerleştirmek için üst, sol, alt, sağ düğmelerini kullanın.
5. Dolguyu giriş içindeki metin, simgenin üzerine gelmeyecek şekilde ayarlayın.

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

yukarıdaki etiketleri CSS dosyanıza ekleyin ve belirtilen sınıfı kullanın.

Bu benim için çalışıyor:

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>

Bunu deneyebilirsin: 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>

Sadece CSS'nizdeki background özelliğini kullanın.

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

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

Böyle bir durumum vardı. Çünkü işe yaramadı background: #ebebeb;. Giriş alanına arka plan koymak istedim ve bu özellik sürekli olarak arka plan görüntüsünün üstünde görünüyordu ve görüntüyü göremedim! Bu yüzden, backgroundmülkün üstünde olmak için taşındım background-imageve işe yaradı.

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

Benim durumum için çözüm:

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

Sadece söz, için border, paddingve text-alignözellikleri çözümü için önemli değildir. Sadece orijinal kodumu kopyaladım.

Font-icon ile kullanma

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

VEYA

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

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

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

Örneğin şunu kullanabilirsiniz: gizli girişli etiket (simge var).

başlangıçta girişiniz için bu css sınıfını kullanın, ardından buna göre özelleştirin:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }

<input class="inp-icon" type="text">

Bu benim için daha fazla veya daha az standart formda işe yarar:

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