Поместите значок внутри элемента ввода в форме

Question

Как поместить значок внутри элемента ввода формы?

Живая версия по адресу: Приливная тема

Answer 1

Сайт, на который вы ссылаетесь, использует комбинацию трюков CSS, чтобы осуществить это. Во-первых, он использует background-image для элемента <input>. Затем, чтобы переместить курсор, он использует padding-left.

Другими словами, у них есть два правила CSS:

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

Answer 2

Решения CSS, опубликованные другими, - лучший способ сделать это.

Если это может вызвать какие-либо проблемы (см. IE6), вы также можете использовать ввод без полей внутри div.

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

Не так "чисто", но должно работать в старых браузерах.

Answer 3

Вы можете попробовать это:

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

Answer 4

Решение без фоновых изображений:

#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

Я считаю, что это лучшее и самое чистое решение. Использование text-indent в элементе 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;
}

добавьте вышеуказанные теги в ваш CSS-файл и используйте указанный класс.

Answer 7

Это работает для меня:

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

Вы можете попробовать это: 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>

Answer 9

Использование с font-icon

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

Answer 10

Просто используйте свойство background в вашем CSS.

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

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