input type file

[pro100set]

Ребят подскажите пожалуйста как нормально этот инпут оформить, у меня по дизайну эта кнопка широкая и меняет фон при наведении, я пробовал через опасити т.е. поставить фон под инпут а инпуту задать 0 прозрачность, но из за того что кнопка длинная курсор над ней становится плочкой как над input type text и никакими стайлами и импортантами это не исправляется, что не есть гуд, пробовал скриптами подгонять инпут под курсор при наведении на нужный фон так там с сменой фона фигня получается он тупо моргает как бы я не старался. В общем подскажите пожалуйста варианты решения проблемы - буду очень признательным.

[klierik]

<input type="file" /> - не кастомизируется.

используй JS средства для эмуляции кастомного элемента

[pro100set]

Не прокатит во многих браузерах для этого инпута запрещена эмуляция onclick.

Мне нужно обязательно что бы всплывало окошко для выбора файла.

[klierik]

я при чем тут эмуляция onclick?

просто скрипт делает некоторое "чудо" и якобы кастомизирует элемент.

В кратце:

- создается разметка для псевдо-нипу-файла

- на контейнер вешается relative

- инпут-файлу задается размер шрифта большой (к примеру 500px) за счет чего он бешено увеличивается. потом на него же вешается opacity и потом позиционируется через absolute.

вуаля.

[pro100set]

Теперь мне не очень понятно, то что описано выше можно замутить с помощью КСС без всяких скриптов, не могли бы вы описать работу скрипта. С размерами шрифта я уже игрался, в разных браузерах получается по разному, в Мозиле например кнопка вообще не увеличивается.

[klierik]

скрипт (который мне попадался однажды) автоматизирует работу и применяется к уже существующей разметке за счет чего не требуется дополнительные телодвижения (хорошо подходит для существующего проекта когда требуется кастомный элемент сделать малой кровью)

Теперь по поводу шрифта.

Рассмотрим правило:

input[type="file"] {
	font-size: 500px;
	}

Размер шрифта применяется непосредственно к тегу, за счет чего увеличивается не только размер шрифта в кнопке, но и соответственно размер всего элемента.

Давай рассмотрим ситуацию на примере (я, правда, не буду рисовать полностью кастомный элемент, но приведу наглядный пример).

Предположим у нас есть разметка:

<div class="input-file">
        <input type="file" value="Select file" />
        <span class="input-file__text">Click for select file, please</span>
    </div>

Тут представлен в роли кастомизации нашего элемента <span>, но, естественно, на его месте может быть все что угодно.

Наша задача будет следующая: при клике на надпись, должно показаться окошко с выбором файла.

А вот и CSS стили которые применяются к нашей конструкции:

/* @group Input file */

	.input-file {
		position: relative;
		display: inline-block;
		overflow: hidden;
		padding: 5px 10px;

		background: #fff;
		border: 1px solid #999;
		}
		.input-file > input[type="file"] {
			font-size: 500px;

			position: absolute;
			left: 0;
			top: 0;

			opacity:  0;
			}

		.input-file__text {
			font-size: 16px;
			}

/* @end */

Фактически теперь ты сможешь построить любой кастомный инпут-файл

[psywalker]

pro100set, Дружище, отпиши мне на почту, помогу тебе. Тут не могу показать, запрещено мне.

psywalker09@gmail.com

klierik

А тебе дружище я щас в скайпе покажу пример. И твой вариант не прокатит так просто.