Оформлення елемента input type file засобами CSS та JavaScript
У своєму рішенні, я використовую бібліотеку jQuery, і кінцевий результат у мене є ось такий простенький плагін:
(function( $ ) $.fn.extended_itf = function() if ( /msie/.test(navigator.userAgent.toLowerCase()) ) return; // не працює для IE this.each(function() var obj = $(this); var placeholder = obj.is('[placeholder]') ?obj.attr('placeholder') : 'no file selected';
Звертаю вашу увагу, що для браузера Internet Explorer таке рішення не працює. Звичайно, можна було б нагородити город із шарами, але я вирішив просто виключити його із поля свого інтересу. Саме використання плагіна може мати такий вид:
Очевидно, що оформити такий елемент засобами CSS не складає особливих труднощів. Особисто я волію використовувати гумовий вигляд полів форми. Тому мені довелося робити відповідну конструкцію. Ось як це виглядає:
.upload_file background: #eee; border: 1px solid #bbb; display: block; min-width: 200px; overflow: hidden; padding-right: 81px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; > .upload_file input position: absolute; left: -9999px; > .upload_value float: left; width:100%; > .upload_value div color: #333; font: 14px/32px Arial, Helvetica, sans-serif; padding: 0 6px; > .upload_button background: url(/2014/04/button.png) 50% 50% no-repeat; cursor: hand; cursor: pointer; float: left; margin-right: -81px; width: 81px; height: 32px; >
До речі (для спрощення завдання) оформлення кнопки було здійснено у вигляді фонової картинки. У той же час ви завжди можете створити повноцінний елемент. Наприклад, замінивши рядок:
на щось на зразок наступного:
Правда, при моєму варіанті гумової верстки слід врахувати, що розмір кнопки фіксований. Тим не менш, за бажання, можна домогтися чого завгодно, особливо якщо використовувати ту саму таблицю.
Переглянути демо-версію роботи рішення ви можете пройшовши за цим посиланням »
На цьому маю все. Дякую за увагу. Успіхів!