Поставить в значок входной элемент в виде

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

Живая версия ПО: тема прилива сил

Ryan B
Редактировал вопрос 9-го июля 2013 в 3:04
Программирование
icons forms css input element
27-го мая 2009 в 7:36
30 просмотров
Комментарии к вопросу (1)
Решение

На сайте вы связаны использует комбинацию трюков CSS, чтобы все это провернуть. Во-первых, он использует фон-изображение в <ввод> элемент. Затем, чтобы подтолкнуть курсор, он использует обивка-слева.

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

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
Комментарии (6)

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

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

<div style="border: 1px solid #DDD;">

    <input style="border: none;"/>
</div>

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

Комментарии (4)

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

в <предварительно><код>вход[тип='текст'] { фонового изображения: URL(с images/comment-author.gif); фон-позиции: 7px 7px; фон-повторить: не повторять; }</код></пре>

Комментарии (0)

Решение без фона-картинки:

в 

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

</div>

в

Комментарии (0)

Я считаю, это самое лучшее и чистое решение. Используя текст-отступ на вход элемента

Усс:

#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" />
Rust
Редактировал ответ 1-го июля 2016 в 7:43
Комментарии (3)
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

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

Комментарии (0)

Используя шрифтом-значок

<input name="foo" type="text" placeholder="">

Или

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

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}
Комментарии (1)

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

в 

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

Name
<input class="valid" type="text" name="name" />

в

Комментарии (2)

Я была в такой ситуации. Это не'т работу из-за фона: #ebebeb;. Я хотел поставить фон на поле ввода, и это свойство постоянно появляться на верхней части фонового изображения, и я не мог&#39;т см. изображения! Итак, я переехал вфоне` свойство быть выше фона-изображения собственность и он работал.

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

Просто говоря, граница, обивка и `текст-выровнять свойства не важны для решения. Я просто реплицируются мой исходный код.

Комментарии (2)

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

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

#foo
{
    background: url(/img/foo.png);
}
Комментарии (0)

Вы можете попробовать это : прихлоп-4-бета - протокол HTTPS://www.codeply.com/go/W25zyByhec

<div class="container">

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

        </div>
Hasan
Редактировал ответ 23-го июня 2018 в 6:02
Комментарии (0)

Простой и легкий способ установки внутренней значок входа является использование установки свойства 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">

  <input/>
</div>

в

Комментарии (0)
 



    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>

Например, вы можете использовать это : этикетка с скрытого ввода (иконка присутствует).

Комментарии (0)

используйте этот класс в CSS для ввода в Пуск, затем настроить соответствующим образом:

в 

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

в

csandreas1
Редактировал ответ 13-го февраля 2019 в 6:58
Комментарии (1)