input file

by AJIEKCEU

HTML

<input type="file" name=""/>

CSS

.jq-file {
border: none;
border-radius: 4px;
}
.jq-file.focused {
	border: 1px solid #5794BF;
}
.jq-file input {
	cursor: pointer;
}
.jq-file .name {
	width: 120px;
padding: 7px 10px 6px;
border: none;
background: none;
float: right!important;
color: #333;
font: 14px Arial, Tahoma, sans-serif;
}
.jq-file .browse {
padding: 6px 10px 0px;
height: 20px;
border: 1px solid #CCC;
border-radius: 2px;
color: #000;
background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#dddcdc));
background: -webkit-linear-gradient(#ffffff, #dddcdc);
background: -moz-linear-gradient(#ffffff, #dddcdc);
background: -ms-linear-gradient(#ffffff, #dddcdc);
background: -o-linear-gradient(#ffffff, #dddcdc);
background: linear-gradient(#ffffff, #dddcdc);
-pie-background: linear-gradient(#ffffff, #dddcdc);
font: 10px Arial, Tahoma, sans-serif;
}
.jq-file:active .browse {
background: #dddcdc;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dddcdc), to(#fff));
background: -webkit-linear-gradient(#dddcdc, #fff);
background: -moz-linear-gradient(#dddcdc, #fff);
background: -ms-linear-gradient(#dddcdc, #fff);
background: -o-linear-gradient(#dddcdc, #fff);
background: linear-gradient(#dddcdc, #fff);
-pie-background: linear-gradient(#dddcdc, #fff);
}

.jq-file.disabled,
.jq-file.disabled .browse {
	border-color: #CCC;
	background: #F5F5F5;
	box-shadow: none;
	color: #888;
}

JavaScript

/* jQuery Form Styler v1.3.4 | (c) Dimox | http://dimox.name/jquery-form-styler/ */
(function(d){d.fn.styler=function(n){n=d.extend({idSuffix:"-styler",browseText:"выберите файл",selectVisibleOptions:0,singleSelectzIndex:"100",selectSmartPositioning:!0},n);return this.each(function(){var a=d(this),l="",q="",r="";void 0!==a.attr("id")&&""!=a.attr("id")&&(l=' id="'+a.attr("id")+n.idSuffix+'"');void 0!==a.attr("class")&&""!=a.attr("class")&&(q=" "+a.attr("class"));var s=a.data(),e;for(e in s)""!=s[e]&&(r+=" data-"+e+'="'+s[e]+'"');l+=r;a.is(":checkbox")?
a.css({position:"absolute",left:-9999}).each(function(){if(1>a.next("span.jq-checkbox").length){var b=d("<span"+l+' class="jq-checkbox'+q+'" style="display: inline-block"><span></span></span>');a.after(b);a.is(":checked")&&b.addClass("checked");a.is(":disabled")&&b.addClass("disabled");b.click(function(){if(!b.is(".disabled"))return a.is(":checked")?(a.prop("checked",!1),b.removeClass("checked")):(a.prop("checked",!0),b.addClass("checked")),a.change(),!1});a.parent("label").add('label[for="'+a.attr("id")+
'"]').click(function(a){b.click();a.preventDefault()});a.change(function(){a.is(":checked")?b.addClass("checked"):b.removeClass("checked")}).keydown(function(d){a.parent("label").length&&(13==d.which||32==d.which)&&b.click()}).focus(function(){b.is(".disabled")||b.addClass("focused")}).blur(function(){b.removeClass("focused")});a.on("refresh",function(){a.is(":checked")?b.addClass("checked"):b.removeClass("checked");a.is(":disabled")?b.addClass("disabled"):b.removeClass("disabled")})}}):a.is(":radio")?
a.css({position:"absolute",left:-9999}).each(function(){if(1>a.next("span.jq-radio").length){var b=d("<span"+l+' class="jq-radio'+q+'" style="display: inline-block"><span></span></span>');a.after(b);a.is(":checked")&&b.addClass("checked");a.is(":disabled")&&b.addClass("disabled");b.click(function(){if(!b.is(".disabled"))return...