Оформление кнопки Загрузить

CSS/CSS3

2017-02-04_22-47_Input FileПросто и легко поменять стиль для этой странной кнопки «Загрузить».

Источник
http://webcareer.ru/stilizaciya-input-file.html

CSS

body {
	font-family: Arial, sans-serif;
	color: #4a4a4a;
}
.file-upload {
	position: relative; /* Даем возможность делать позиционирование, внутри данного элемента */
	overflow: hidden; /* Все что выходит за пределы - скрываем */
	width: 20%; /* Задаем ширину кнопки выбора файла */
	height: 20px; /* Задаем высоту кнопки выбора файла */ 
	background: #6da047;
	border-radius: 3px;
	padding: 8px 4px;
	color: #fff;
	text-align: center;
}
.file-upload:hover {
	background: #7aad55;
}
.file-upload input[type="file"] {
	display: none; /* Обязательно скрываем настоящий Input File */
}
.file-upload label {
	/* Растягиваем label на всю возможную площадь блока .file-upload */
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.file-upload span {
	line-height: 36px; /* Делаем вертикальное выравнивание текста, который написан на кнопке */
}
.filename {
	background: #fff;
	border: 0;
}


HTML:

 
!DOCTYPE html
html lang="ru"
    head
        meta charset="utf-8"
        title Input File /title
        link rel="stylesheet" href="css/style.css"
    /head
    body
    	form action="#" method="post"
            div class="file-upload"
                label
                    input type="file" name="file"
                    span Выберите фай /span
                /label 
            /div
    	/form
    /body
/html
    
    

Добавить комментарий