Покладіть значок всередину вхідного елемента у форму

Як розмістити піктограму всередині елемента введення форми?

Жива версія за темою Tidal Force

Веб-сайт, на який ви пов’язали, використовує комбінацію фокусів CSS, щоб усунути це. По-перше, для <input>елемента використовується фонове зображення . Потім, щоб натиснути курсор, він використовує padding-left.

Іншими словами, у них є ці два правила CSS:

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

CSS-рішення, розміщені іншими, - найкращий спосіб досягти цього.

Якщо це повинно створити будь-які проблеми (читайте IE6), ви також можете використати введення даних без полів всередині div.

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

Не настільки "чисто", але має працювати на старих браузерах.

Рішення без фонових зображень:

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

Ви можете спробувати це:

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

Я вважаю це найкращим і найчистішим рішенням для нього. Використання тексту-відступу на 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" />

Простий та простий спосіб розташування значка всередині входу - це використання властивості CSS позиції, як показано у наведеному нижче коді. Примітка. Я спростив код для наочності.

1. Створіть контейнер, що оточує вхід та піктограму.
2. Встановіть положення контейнера як відносне
3. Встановіть значок як абсолютне положення. Це дозволить розташувати значок відносно навколишнього контейнера.
4. Клацніть піктограму в контейнері вгорі, ліворуч, знизу, праворуч.
5. Встановіть прокладку всередині вводу, щоб текст не перекривав значок.

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

додайте вище теги у свій файл CSS та використовуйте вказаний клас.

Це працює для мене:

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>

Ви можете спробувати це: 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>

Просто використовуйте фонове властивість у вашому CSS.

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

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

У мене була така ситуація. Це не спрацювало через background: #ebebeb;. Я хотів поставити фон на полі введення, і ця властивість постійно відображалася у верхній частині фонового зображення, і я не міг побачити зображення! Отже, я перемістив backgroundмайно, щоб бути вище background-imageвласності, і воно спрацювало.

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

Рішення для моєї справи було:

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

Просто кажучи, border, paddingі text-alignвластивості не важливі для вирішення. Я просто копіював свій оригінальний код.

Використання зі значком шрифту

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

АБО

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

Наприклад, ви можете використовувати це: мітка з прихованим введенням (значок присутній).

використовуйте цей клас css для введення на початку, а потім налаштуйте відповідно:

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

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

Це працює для мене в більш-менш стандартних формах:

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