Как вставить иконку в input css

How to Style the HTML File Input Button with CSS

Today’s task is to create and style file input without any JavaScript code. We’re going to demonstrate a tricky way of creating and styling a file input with HTML and CSS. Let’s build an example and see how it works.

Watch a video course CSS — The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

html> html> head> title>Title of the document title> head> body> div class="container"> div class="button-wrap"> label class="button" for="upload">Upload File label> input id="upload" type="file"> div> div> body> html>

Add CSS

Set the display of the «container» class to «flex»and set both the align-items and justify-content properties to «flex-start». Aslo add the width property set to «100%».
Style the input by specifying the color, font-size, top, and left properties. Set the position to «absolute» and specify z-index.
Set the position to «relative» for the wrapper so as the element is placed relative to its normal position.
Set the display of the «button» class to «inline-block» so as the element displays as an inline-level block container.
Set the color of the text and the background-color of the button.
Set the padding. The first value sets the top and bottom sides and the second one sets the right and left sides.
Make a little bit rounded corners for the outer border edge of the button with the border-radius property.
Set the font-size and the thickness of the font with the font-weight property.

.container < display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; > input[type="file"] < position: absolute; z-index: -1; top: 10px; left: 8px; font-size: 17px; color: #b8b8b8; > .button-wrap < position: relative; > .button < display: inline-block; padding: 12px 18px; cursor: pointer; border-radius: 5px; background-color: #8ebf42; font-size: 16px; font-weight: bold; color: #fff; >

So, here’s our custom file input with pure CSS.

Example of styling the file input button:

html> html> head> title>Title of the document title> style> .container < display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; > input[type="file"] < position: absolute; z-index: -1; top: 10px; left: 8px; font-size: 17px; color: #b8b8b8; > .button-wrap < position: relative; > .button < display: inline-block; padding: 12px 18px; cursor: pointer; border-radius: 5px; background-color: #8ebf42; font-size: 16px; font-weight: bold; color: #fff; > style> head> body> div class="container"> div class="button-wrap"> label class="button" for="upload">Upload File label> input id="upload" type="file"> div> div> body> html>

Result

Another beautiful example with the :hover pseudo-class.

Example styling the file input button with the :hover pseudo-class:

html> html> head> title>Title of the document title> style> .container < display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; > input[type="file"] < position: absolute; z-index: -1; top: 15px; left: 20px; font-size: 17px; color: #b8b8b8; > .button-wrap < position: relative; > .button < display: inline-block; background-color: #1d6355; border-radius: 10px; border: 4px double #cccccc; color: #ffffff; text-align: center; font-size: 20px; padding: 8px; width: 100px; transition: all 0.5s; cursor: pointer; margin: 5px; > .button:hover < background-color: #00ab97; > style> head> body> div class="container"> div class="button-wrap"> label class="button" for="upload">Upload File label> input id="upload" type="file"> div> div> body> html>

Как добавить иконку в input?

Ладно песочницу не сделали, но хоть бы скрин приложили.
Иконка просто фоном не делается? У неё есть функциональность?

Читать:

Как сохранить страницу в интернет эксплорер на панели задач

Решения вопроса 2

DevMan

на нормальную песочницу у вас сил не хватило. жаль.

подсказываю один из вариантов:
-> сделать див с инпутом
-> убрать стилизацию с инпута
-> перед/после инпутом поставить иконку
-> весь див стилизовать как инпут

Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать

profesor08

profesor08 @profesor08 Куратор тега CSS

Размести, любым удобным способом, блок с иконкой поверх инпута, инпуту задай подходящий отступ со стороны иконки.

Как вставить в input шрифтовую иконку?

Подскажите как и можно ли вставить в input шрифтовую иконку. Например, FontAwesome. Чтобы просто вставить картинку, это можно сделать через background-image, а как вставить шрифтовую иконку не могу догадаться.

Отслеживать
задан 27 апр 2016 в 19:45
Gregory Bass Gregory Bass
625 1 1 золотой знак 6 6 серебряных знаков 17 17 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

.wrapper input[type="text"] < position: relative; >.wrapper input[type="text"]:before

Отслеживать
ответ дан 27 апр 2016 в 19:50
980 5 5 серебряных знаков 15 15 бронзовых знаков

что бы вставить иконку с данного ресурса нужно сначала выбрать иконку на сайте =>потом нажать на нее=>высветиться снизу код по типу и потом просто вставить его в HTML код где вы хотите чтобы он стоял.ссылка на сайт вот http://fortawesome.github.io/Font-Awesome/icons/

Отслеживать
ответ дан 27 апр 2016 в 20:29
1,049 3 3 золотых знака 14 14 серебряных знаков 29 29 бронзовых знаков

Оберните иконку и input блоком, к примеру блоком div или label .
Задайте блоку position relative , соответственно детям absolute и выровняйте относительно друг друга как вам нужно.

Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
ответ дан 1 мая 2020 в 11:24
21 4 4 бронзовых знака

html
css
вёрстка

Важное на Мете

Связанные

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как поставить иконку в input?

sh4rov

Qurds12, мне это ничего не говорит. Сделайте демку на кодпене и покажите как вы это делаете.