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

Question

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

268

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

doovers 17 сен. 2013, в 01:23

Источник

5

Это мое альтернативное решение (на 2014 год) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Richard Cotrina 02 март 2014, в 16:33
0

опоздал на вечеринку, но проверь мой ответ, я использую только начальную загрузку, чтобы получить этот эффект, и чтобы изменить цвет и границу, я использую две строки CSS. он решает другие проблемы, которые обсуждались в разделе ответов stackoverflow.com/a/40945821/2914407
Dheeraj 03 дек. 2016, в 08:40

Теги:

twitter-bootstrap

css

glyphicons

14 ответов

55

официальный метод. Пользовательский 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>

DEMO: http://jsfiddle.net/LS2Ek/1/

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

Medorator 22 апр. 2014, в 21:42

3

+1 - Определенно приятно иметь встроенный подход в начальной загрузке. Хотя при выравнивании по левому краю пиктограмм не так много, как требует вопрос, но определенно это хороший подход.
KyleMit 26 июнь 2014, в 15:46
1

Добавление {left:0} к классу глификонов должно обеспечить выравнивание по левому краю. jsfiddle.net/LS2Ek/30 . Мне нравится твой набросок + box-shadow. Выглядит аккуратно!
user 04 июль 2014, в 05:05
0

Изначально я тоже так думал, но в итоге вы создадите большую часть работы CSS в разных ситуациях. Если вы добавите ярлык , вы увидите некоторые проблемы . На встроенной форме left:0 больше не идентифицирует начало ввода. Также вам нужно добавить отступ слева от ввода и удалить его справа. Тем не менее, очень хорошее и чистое решение. Я думаю, что идентификация слева от ввода - это сложная часть, где пригодится обертка с position:relative .
KyleMit 04 июль 2014, в 12:43
0

Вы должны добавить этот патч для начальной загрузки. Это удобная и часто используемая функция.
user 04 июль 2014, в 13:18
2

буфер, патч отправлен !
KyleMit 22 июль 2014, в 13:27

Показать ещё 3 комментария

38

Здесь используется только 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 12 нояб. 2013, в 01:16

0

+1 отличное решение. Я адаптировал его в левый и правый служебный класс, но определенно правильный подход
KyleMit 26 нояб. 2013, в 00:26
0

да, так просто и просто идеально
PeMa 22 фев. 2017, в 13:57

9

Вот как я это сделал, используя только загрузочный 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>

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

Garry English 02 фев. 2015, в 05:05

7

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

Fiddle

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

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

Fiddle

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

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

Fiddle

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 28 янв. 2014, в 10:35

6

Это можно сделать, используя классы из официальной версии 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>

Вот вывод

Чтобы настроить его, добавьте еще пару строк custuom 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, связанные с таблицами, выравнивание при использовании ввода-lg и сосредоточиться на проблеме вкладок.

Dheeraj 03 дек. 2016, в 08:33

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 17 апр. 2015, в 18:45

5

Если вы используете Fontawesome, вы можете сделать это:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Результат

Полный список юникодов можно найти в полном значке значка Font Awesome 4.6.3

Merlin 13 окт. 2016, в 09:41

1

отличное решение! к сожалению, не все иконки работают на меня ...
Alphacoder 22 фев. 2018, в 14:46

2

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

Angel Patel 02 май 2017, в 11:37

0

отличный "джугад", но это действительно полезно, чтобы установить собственный значок также. спасибо.
Dhruv Raval 07 авг. 2018, в 11:54

2

Вот еще один способ сделать это, поместив глификон с помощью псевдоэлемента :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 предназначены для центрирования и добавления правильного интервала.

Результат:

Richard Cotrina 21 март 2014, в 04:39

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>

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

Vitalii Nesterenko 24 нояб. 2015, в 21:41

0

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

Итак, чтобы добавить значок пользователя, просто добавьте  в атрибут 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 - это шрифт обычного текста на входе.

Mona Lisa 21 сен. 2017, в 23:05

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 10 июнь 2015, в 03:17

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 16 сен. 2013, в 23:59

0

В этом ответе отсутствует ссылка на начальный глификон
Kirby 03 сен. 2015, в 22:35
0

@Kirby, на иконку ссылается класс icon-user. Этот ответ был написан во время Bootstrap версии 2. Вы можете увидеть ссылку на следующей странице - getbootstrap.com/2.3.2/base-css.html#images
YOOOEE 05 сен. 2015, в 00:15
0

Ах. Моя вина. Спасибо за разъяснения. Upvoted
Kirby 05 сен. 2015, в 02:45

Показать ещё 1 комментарий

Ещё вопросы

Это мое альтернативное решение (на 2014 год) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
опоздал на вечеринку, но проверь мой ответ, я использую только начальную загрузку, чтобы получить этот эффект, и чтобы изменить цвет и границу, я использую две строки CSS. он решает другие проблемы, которые обсуждались в разделе ответов stackoverflow.com/a/40945821/2914407
+1 - Определенно приятно иметь встроенный подход в начальной загрузке. Хотя при выравнивании по левому краю пиктограмм не так много, как требует вопрос, но определенно это хороший подход.
Добавление {left:0} к классу глификонов должно обеспечить выравнивание по левому краю. jsfiddle.net/LS2Ek/30 . Мне нравится твой набросок + box-shadow. Выглядит аккуратно!
Изначально я тоже так думал, но в итоге вы создадите большую часть работы CSS в разных ситуациях. Если вы добавите ярлык , вы увидите некоторые проблемы . На встроенной форме left:0 больше не идентифицирует начало ввода. Также вам нужно добавить отступ слева от ввода и удалить его справа. Тем не менее, очень хорошее и чистое решение. Я думаю, что идентификация слева от ввода - это сложная часть, где пригодится обертка с position:relative .
Вы должны добавить этот патч для начальной загрузки. Это удобная и часто используемая функция.
+1 отличное решение. Я адаптировал его в левый и правый служебный класс, но определенно правильный подход
отличное решение! к сожалению, не все иконки работают на меня ...
отличный "джугад", но это действительно полезно, чтобы установить собственный значок также. спасибо.
В этом ответе отсутствует ссылка на начальный глификон
@Kirby, на иконку ссылается класс icon-user. Этот ответ был написан во время Bootstrap версии 2. Вы можете увидеть ссылку на следующей странице - getbootstrap.com/2.3.2/base-css.html#images
Ах. Моя вина. Спасибо за разъяснения. Upvoted

KyleMit · Accepted Answer · 2013-09-17T00-25-00.000Z

Без бутстрапа:

Мы заберем 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; }

Демо в Plunker

Примечание. Предполагается, что вы используете glyphicons, но одинаково хорошо работает с 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>

Pros

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

Минусы:

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

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

Просто включите эти изменения формы в css (также вложенные с помощью скрытого фрагмента стека внизу) < br/ " > _{* LESS: альтернативно, если вы здание через меньшее, здесь изменения формы меньше}

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

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

Здесь демо в Plunker

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

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

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

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

Посмотрите мои изменения, я сделал css-селектор focusInput более явным, иначе он перезаписывается с помощью .input-group-addon.
@ MichelMüller, я не уверен, что вижу значение в предложенном вами редактировании. Класс .focusedInput определяется после .input-group-addon поэтому, когда таблицы стилей располагаются каскадно , последние стили должны иметь приоритет. Можете ли вы описать сценарий лучше, что привело к возникновению проблемы?
Я думаю, что вы правы, простите за путаницу. Я думаю, что у меня был сбой обновления, связанный с кэшем браузера, который заставил меня поверить, что это не потянет тот выбор CSS.
Я предлагаю добавить "указатель-события: нет;" для значков, потому что по умолчанию они мешают фокусировке ввода.
@Frizi, +1, отличная идея! Добавлен. Спасибо за вклад.
Я сделал это JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
@RichardCotrina, похоже, это отдельное решение. Вы должны добавить объяснение и переместить его в новый ответ. Я бы назвал это ответом!
Не работает с bs3.1 и fa 403: jsfiddle.net/Leandro1981/7656Q
@ Леандро, это точно! , Это просто потому, что FontAwesome представил критические изменения в версии 4. Если вы хотите обновить версию с 3.x до 4.x , вы должны изменить  на  . Каждый раз, когда вы думаете об обновлении внешних библиотек, обязательно прочитайте примечания к выпуску и новую документацию, чтобы определить, совместимо ли ваше приложение или его нужно обновить.
@Leando, вы можете прочитать больше о новых соглашениях об именах в FA 4.0, а также полное руководство по переходу с 3.21 до 4
большое спасибо! вам действительно нужно больше голосов!
В Bootstrap 3.0 
Есть ли способ сделать значок внутри ввода кликабельным?
@cwarny, конечно, просто добавьте cursor: pointer чтобы он казался кликабельным, а затем прослушайте событие click jQuery в классе .form-control-feedback . Вот демо в скрипке
Значок не выровнен в середине для input.input-lg
@Akam, можете ли вы предоставить пример или скриншот или код или любую другую информацию, которая только это. Не должно быть много, чтобы раскошелиться в существующем коде, но я не могу воспроизвести на основе вашего комментария.