Input type=file

Softlink · August 3, 2011

И снова здравствуйте!

У меня опять задача. Первый раз столкнулся с type=file и очень удивился, когда к нему не применились стили, выставленные для input.

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

<!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>

Так вот в чем вопросы(возможно риторические):

1)если дизайн не очень портится от стандартного инпута, может не стоит извращаться или такая стилизация вполне нормальна?

2)есть ли еще какой-нибудь способ его разукрасить?

Great Rash · August 3, 2011

http://vremenno.net/examples/file-input-styling/

Softlink · August 3, 2011

http://vremenno.net/examples/file-input-styling/

Great Rash, спасибо)) Но, пожалуй, он останется стандартным. Наверное не целесообразно писать 100 строк кода для одной кнопки <_<

Sign In

Input type=file

Question

Softlink

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information