HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Стилизация input type file с помощью CSS

Много споров идут про то, должны ли быть элементы формы стандартными или нет. Но если всё-таки дизайн сайта предполагает сделать input type=file стилизованным, давайте посмотрим как это можно сделать простеньким способом.

Идея метода состоит в том, что мы сначала делаем подложку с нужным красивым инпутом, а потом поверх него абсолютно и с нулевой прозрачностью позиционируем настоящий input type=»file».

Сначала нарисуем стилизованный input (inputtypefile.png). Извините за мои фотошоповские навыки :) :

стилизованный input type file

Дальше делаем обычный input type=»file» такого же размера как и рисунок-подложка. А рисунок ставим фоном дива, а в этот див кидаем обычный input type=text соответсвующего размера:

стилизованный input type file

Далее позиционируем настоящий инпут поверх подложки и делаем его прозрачным. Пллюс немного стилей и приходим к рабочему варианту стилизованного инпута:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type file</title>
<style>
form {
	position:relative; /* чтобы можно было позиционировать абсолютно элементы внутри формы */
	padding:0;
	margin:0;
}
#mask {
	width:283px; /* Эти значения чисто из-за особенностей моего рисунка */
	height:37px;
	padding:3px 100px 0 10px;
	background:url(inputtypefile.png) no-repeat 0 0;
}
#fileInput {
	width:393px; /* вот незадача, FF не хочет задавать ширину, для этого зададим size */
	height:40px;
	position:absolute;/* позиционируем настоящий input type=file */
	left:0;
	top:0;
	opacity: 0;/* задаем нулевую видимость */
	filter:alpha(opacity=0);
}
#fileInputText {
	border:1px solid #FFF;
	width:100%;
	font-size:22px;
}
</style>
</head>
<body>
<form action="#">
  <input type="file" id="fileInput" size="49" onchange="document.getElementById('fileInputText').value = this.value;" />
  <div id="mask">
    <input type="text" id="fileInputText" />
  </div>
</form>
</body>
</html>

Примечание. Мы используем onchange на настоящий инпут, чтобы отобразить путь к файлу в инпуте в слое-подложке. Еще файрфокс почему-то не захотел задавать ширину инпута в пикселах, для чего ему задали size.

Замечание. Минус такого способа, что при выключенном css, мы увидим два рядом стоящих инпута, что может пользователя ввести в некоторое заблуждение. Ну а при выключенном ява скрипте, не будет копироваться путь к файлу в инпут-подложке. Но это же всё мелочи ;)

Метки: , ,

Запись опубликована 22.07.2009 в 00:00 и размещена в рубрике css, html. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.


Fatal error: Call to undefined function wp_related_posts() in /home/k/kazanets/htmlcssinfo/public_html/wp-content/themes/htmlcsstheme/single.php on line 70