Добавить глифтон начальной загрузки в поле ввода

340

Как добавить глификон в поле ввода типа текста? Например, я хочу иметь 'icon-user' при вводе имени пользователя, что-то вроде этого:

введите описание изображения здесь

doovers
источник
5
Это мое альтернативное решение (на 2014 год) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Ричард Котрина
опоздал на вечеринку, но проверь мой ответ, я использую только начальную загрузку, чтобы получить этот эффект, и чтобы изменить цвет и границу, я использую две строки CSS. он решает другие вопросы, которые обсуждались в разделе ответов stackoverflow.com/a/40945821/2914407
Dheeraj

Ответы:

755

Без начальной загрузки:

Мы вернемся к Bootstrap через секунду, но вот основные принципы CSS в игре, чтобы сделать это самостоятельно. Как указывает хищная борода , вы можете сделать это с помощью CSS, просто разместив значок внутри элемента ввода. Затем добавьте отступы с любой стороны, чтобы текст не перекрывался со значком.

Итак, для следующего HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Вы можете использовать следующий CSS для выравнивания символов слева и справа:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Демо в Плункер

скриншот css

Примечание : это предполагает, что вы используете глифы , но одинаково хорошо работает с font-awesome .
Для FA просто замените .glyphiconна.fa


С Bootstrap:

Как указывает буфер , это может быть выполнено непосредственно в Bootstrap с помощью состояний проверки с необязательными значками . Это делается путем присвоения .form-groupэлементу класса .has-feedbackи значку класса .form-control-feedback.

Простейшим примером будет что-то вроде этого:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Плюсы :

  • Включает поддержку различных типов форм (Basic, Horizontal, Inline)
  • Включает поддержку различных размеров элемента управления (по умолчанию, маленький, большой)

Минусы :

  • Не включает поддержку выравнивания по левому краю значков

Чтобы преодолеть минусы, я собрал этот pull-запрос с изменениями для поддержки выровненных по левому краю значков. Поскольку это относительно большое изменение, оно было отложено до будущего выпуска, но если вам нужны эти функции сегодня , вот простое руководство по реализации:

Просто включите эти изменения формы в css (также встроенный через скрытый фрагмент стека внизу)
* LESS : в качестве альтернативы, если вы строите с помощью меньшего , вот форма меняется в меньшем

Затем все, что вам нужно сделать, это включить класс .has-feedback-leftв любую группу, которая имеет класс .has-feedback, чтобы выровнять значок по левому краю.

Поскольку существует множество возможных html-конфигураций для разных типов форм, разных размеров элементов управления, разных наборов значков и разной видимости надписей, я создал тестовую страницу, которая показывает правильный набор HTML для каждой перестановки вместе с живой демонстрацией.

Вот демо в Плункер

скриншот обратной связи

Предложение PS frizi о добавлении pointer-events: none;было добавлено в bootstrap

Не нашли то, что искали ? Попробуйте эти похожие вопросы:

Добавление CSS для значков обратной выравнивания по левому краю

KyleMit
источник
Посмотрите мое редактирование, я сделал css-селектор focusInput более явным, иначе он перезаписывается с помощью .input-group-addon.
Мишель Мюллер
@ MichelMüller, я не уверен, что вижу значение в предложенном вами редактировании. .focusedInputКласс определяется после того, как .input-group-addonтак , когда таблицы стилей Cascade вниз, последние стили должны иметь приоритет. Можете ли вы описать сценарий лучше, что привело к возникновению проблемы?
KyleMit
2
Я предлагаю добавить "указатель-события: нет;" для значков, потому что по умолчанию они мешают фокусировке ввода.
Фризи
1
@ Леандро, это точно! , Это просто потому, что FontAwesome представил критические изменения в версии 4. Если вы хотите обновить версию с 3.x до 4.x , вам нужно перейти <i class="icon-user"></i>на <i class="fa fa-user"></i>. Каждый раз, когда вы думаете об обновлении внешних библиотек, обязательно прочитайте примечания к выпуску и новую документацию, чтобы определить, совместимо ли ваше приложение или его нужно обновить.
KyleMit
1
@Leando, вы можете прочитать больше о новых соглашениях об именах в FA 4.0, а также полное руководство по
переходу
62

Официальный метод. Пользовательский CSS не требуется:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

ДЕМО: http://jsfiddle.net/LS2Ek/1/

Эта демонстрация основана на примере из документации по Bootstrap. Прокрутите вниз до «С дополнительными значками» здесь http://getbootstrap.com/css/#forms-control-validation

введите описание изображения здесь

пользователь
источник
3
+1 - Определенно приятно иметь встроенный подход в начальной загрузке. Несмотря на то, что при выравнивании по левому краю это не так круто, как требует вопрос, но, безусловно, хороший подход.
KyleMit
1
Добавление {left:0}к классу глификонов должно позаботиться о выравнивании по левому краю. jsfiddle.net/LS2Ek/30 . Мне нравится твой набросок + box-shadow. Выглядит аккуратно!
Пользователь
Изначально я тоже так думал, но в итоге вы создадите большую часть работы CSS в разных ситуациях. Если вы добавите ярлык , вы увидите некоторые проблемы . На встроенной форме left:0больше не определяется начало ввода. Также вам нужно будет добавить отступ слева от ввода и удалить его справа. Тем не менее, очень хорошее и чистое решение. Я думаю, что идентификация слева от ввода - это сложная часть, где position:relativeпригодится обертка с .
KyleMit
Вы должны добавить этот патч для начальной загрузки. Это удобная и часто используемая функция.
Пользователь
43

Вот альтернатива только для CSS. Я настроил это для поля поиска, чтобы получить эффект, похожий на Firefox (и сотню других приложений).

Вот скрипка .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}
beardofprey
источник
+1 отличное решение. Я приспособил его к левому и правому служебному классу, но определенно правильный подход
KyleMit
да, так просто и просто идеально
PeMa
11

Вот как я это сделал, используя только стандартный загрузчик CSS v3.3.1:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

И вот как это выглядит:

введите описание изображения здесь

Гарри Английский
источник
8

Этот «чит» будет работать с побочным эффектом того, что класс glyphicon изменит шрифт для элемента управления вводом.

скрипка

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Если вы хотите избавиться от побочного эффекта, вы можете удалить класс «glyphicon» и добавить следующий CSS-код (возможно, есть лучший способ стилизовать псевдоэлемент заполнителя, и я тестировал его только в Chrome).

скрипка

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Возможно, даже более чистое решение:

скрипка

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />
greenbender
источник
8

Это можно сделать с помощью классов из официальной версии bootstrap 3.x, без каких-либо пользовательских CSS.

Используйте input-group-addonперед входным тегом, а input-groupзатем используйте любой из глифов, вот код

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Вот вывод

введите описание изображения здесь

Для дальнейшей настройки добавьте пару строк пользовательского CSS в свой собственный файл custom.css (при необходимости измените отступы)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Делая фон input-group-addonпрозрачным и устанавливая левый градиент входного тега в ноль, вход будет иметь плавный вид. Вот настроенный вывод

введите описание изображения здесь

Вот пример jsbin

Это решит пользовательские проблемы css, связанные с наложением меток, выравниванием при использовании input-lgи сосредоточением на проблеме с вкладками.

Dheeraj
источник
6

Вот решение, не основанное на начальной загрузке, которое упрощает разметку, встраивая представление изображения глифика прямо в CSS с использованием URI-кодирования base64.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

mccainz
источник
5

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">

Анхель Патель
источник
отличный "джугад", но это действительно полезно, чтобы установить пользовательский значок также. спасибо.
Дхрув Равал
4

Вот еще один способ сделать это, поместив глифик с помощью псевдоэлемента :beforeв CSS.

Рабочая демонстрация в jsFiddle

Для этого HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Используйте этот CSS ( совместимы с Bootstrap 3.x и браузерами на основе Webkit )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

Как сказал @Frizi, мы должны добавить, pointer-events: none;чтобы курсор не мешал фокусировке ввода. Все остальные правила CSS предназначены для центрирования и добавления правильного расстояния.

Результат:

Скриншот

Ричард Котрина
источник
2

Вы можете использовать его Unicode HTML

Таким образом, чтобы добавить значок пользователя, просто добавьте &#xe008;к placeholderатрибуту, или где вы хотите.

Вы можете проверить этот шпаргалку .

Пример:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Не забудьте установить шрифт ввода на Glyphicon, используя следующий код:, font-family: 'Glyphicons Halflings', Arialгде Arial - это шрифт обычного текста на входе.

Мона Лиза
источник
1

У меня также есть одно решение для этого случая с Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

На входе у меня есть что-то вроде этого: введите описание изображения здесь

Виталий Нестеренко
источник
1

Протестировано с помощью Bootstrap 4.

Возьми form-controlи добавь is-validв свой класс. Обратите внимание, как элемент управления становится зеленым, но, что более важно, обратите внимание на значок галочки справа от элемента управления? Это то, что мы хотим!

Пример:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Игорь К
источник
0

Если вам повезло, что вам нужны только современные браузеры: попробуйте css transform translate. Это не требует оберток и может быть настроено так, чтобы вы могли увеличить интервал для ввода [type = number] для размещения входного счетчика или переместить его слева от ручки.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

httpete
источник
0

Вы должны быть в состоянии сделать это с существующими классами начальной загрузки и небольшим пользовательским стилем.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Редактировать Значок ссылается через icon-userкласс. Этот ответ был написан во время Bootstrap версии 2. Ссылку можно найти на следующей странице: http://getbootstrap.com/2.3.2/base-css.html#images

YOOOEE
источник
В этом ответе не видны ссылки на начальные глификоны
Кирби
@Kirby, на иконку ссылается класс icon-user. Этот ответ был написан во время Bootstrap версии 2. Ссылку можно найти на следующей странице - getbootstrap.com/2.3.2/base-css.html#images
YOOOEE