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

Question

[verygoodboy]

Всем привет.
Есть текстовый инпут с кнопкой внутри:

<div class="input-group input-group-sm float-right mb-3">
                            <input type="text" name="search" class="form-control float-right" required placeholder="Search">
                                <a href="#"><i class="far fa-times-circle custom-search-botton"></i></a>
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-default">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>

Если вписать в инпут длинную строку, то строка подлазит под кнопку очистки

<a href="#"><i class="far fa-times-circle custom-search-botton"></i></a>

Можно ли сделать так, чтобы длинный тест не заезжал под эту кнопку?

Comments

[Вадим]

добавить паддинг справа?
или уменьшить ширину поля ввода

[Adamos]

Указать input-у padding-right: 2em, например.

[verygoodboy]

Вадим, падинг справа помог. Спасибо!

Answer 1

[Вадим]

добавить паддинг справа