Поместите значок поиска рядом с текстовым полем с помощью бутстрапа

Я использую bootstrap по умолчанию textbox, используя полную ширину столбца, и я хочу поместить значок поиска в конец в текстовое поле.

Мой код выглядит так:

<div class="container">
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="control-label">Name</label>
            <input id="txtName" class="form-control input-sm" />
            <span class="glyphicon glyphicon-search"></span> 
        </div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>

Я не хочу использовать группу ввода.

Пожалуйста, предложите альтернативный способ или альтернативный html с помощью css.

Ответ 1

Вот три способа сделать это:

Здесь рабочая демонстрация в скрипке всех трех

Validation:

Вы можете использовать собственный bootstrap состояния проверки (Нет пользовательского CSS!):

<div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2">Name</label>
    <input type="text" class="form-control" id="inputSuccess2"/>
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

Подробное обсуждение см. в моем ответе на Добавление в окно ввода бутипового глифика

Группа ввода:

Вы можете использовать класс .input-group следующим образом:

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

Для полного обсуждения см. мой ответ на добавление значка Twitter Bootstrap в поле ввода

Неисследованная группа ввода:

Вы можете использовать .input-group для позиционирования, но просто переопределите стиль по умолчанию, чтобы отобразить два элемента отдельный.

Используйте обычную группу ввода, но добавьте класс input-group-unstyled:

<div class="input-group input-group-unstyled">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

Затем измените стиль следующим css:

.input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

Кроме того, эти решения работают для любого размера ввода

Ответ 2

Добавление класса с шириной 90% к вашему элементу ввода и добавление следующего класса ввода-значка в ваш диапазон приведет к тому, что вы хотите, я думаю.

.input { width: 90%; }
.input-icon {
    display: inline-block;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
}

ИЗМЕНИТЬ По предложению, было бы неразумно использовать .input как имя класса, более конкретным было бы рекомендовано. Я просто использовал .input как общий placeholder для вашего css

Ответ 3

<input type="text" name="whatever" id="funkystyling" />

Здесь CSS для изображения слева:

#funkystyling {
    background: white url(/path/to/icon.png) left no-repeat;
    padding-left: 17px;
}

И вот CSS для изображения справа:

#funkystyling {
    background: white url(/path/to/icon.png) right no-repeat;
    padding-right: 17px;
}

Ответ 4

Мне понравился ответ @KyleMit о том, как создать группу с нестационарным входом, но в моем случае я только хотел, чтобы правая сторона была неизолирована. Я все еще хотел использовать входную группу-аддон с левой стороны и выглядеть так: нормальный бутстрап. Итак, я сделал это:

CSS

.input-group.input-group-unstyled-right input.form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

HTML

<div class="input-group input-group-unstyled-right">
    <span class="input-group-addon">
        <i class="fa fa-envelope-o"></i>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-addon input-group-addon-unstyled">
        <i class="fa fa-check"></i>
    </span>
</div>

Ответ 5

Вы можете сделать это в чистом CSS, используя: после псевдоэлемента и получение объявлений с полями.

Вот пример, используя Font Awesome для значка поиска:

.search-box-container input {
  padding: 5px 20px 5px 5px;
}

.search-box-container:after {
    content: "\f002";
    font-family: FontAwesome;
    margin-left: -25px;
    margin-right: 25px;
}

<!-- font awesome -->
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; return false;" rel="stylesheet"/>


<div class="search-box-container">
  <input type="text" placeholder="Search..."  />
</div>