racha.non
9 years ago
519 changed files with 0 additions and 158588 deletions
Binary file not shown.
Binary file not shown.
@ -1,30 +0,0 @@ |
|||||||
# Styling & Customizing File Inputs the Smart Way |
|
||||||
|
|
||||||
A tutorial on how to style and customize <input type="file"> in a semantic, accessible way using the <label> element and some JavaScript. By Osvaldas Valutis. |
|
||||||
|
|
||||||
[Article on Codrops](http://tympanus.net/codrops/?p=24831) |
|
||||||
|
|
||||||
[Demo](http://tympanus.net/Tutorials/CustomFileInputs/) |
|
||||||
|
|
||||||
## License |
|
||||||
|
|
||||||
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". |
|
||||||
|
|
||||||
Read more here: [License](http://tympanus.net/codrops/licensing/) |
|
||||||
|
|
||||||
## Credits |
|
||||||
|
|
||||||
Icon made by [Daniel Bruce](http://www.danielbruce.se) from [www.flaticon.com](http://www.flaticon.com) is licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/) |
|
||||||
|
|
||||||
## Misc |
|
||||||
|
|
||||||
Follow Osvaldas: [Twitter](http://twitter.com/osvaldas), [Dribbble](http://dribbble.com/osvaldas), [Google+](https://plus.google.com/107216309002112755043?rel=author) |
|
||||||
|
|
||||||
Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) |
|
||||||
|
|
||||||
[© Codrops 2015](http://www.codrops.com) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,239 +0,0 @@ |
|||||||
.js .inputfile { |
|
||||||
width: 0.1px; |
|
||||||
height: 0.1px; |
|
||||||
opacity: 0; |
|
||||||
overflow: hidden; |
|
||||||
position: absolute; |
|
||||||
z-index: -1; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile + label { |
|
||||||
max-width: 80%; |
|
||||||
font-size: 1.25rem; |
|
||||||
/* 20px */ |
|
||||||
font-weight: 700; |
|
||||||
text-overflow: ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
cursor: pointer; |
|
||||||
display: inline-block; |
|
||||||
overflow: hidden; |
|
||||||
padding: 0.625rem 1.25rem; |
|
||||||
/* 10px 20px */ |
|
||||||
} |
|
||||||
|
|
||||||
.no-js .inputfile + label { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile:focus + label, |
|
||||||
.inputfile.has-focus + label { |
|
||||||
outline: 1px dotted #000; |
|
||||||
outline: -webkit-focus-ring-color auto 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile + label * { |
|
||||||
/* pointer-events: none; */ |
|
||||||
/* in case of FastClick lib use */ |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile + label svg { |
|
||||||
width: 1em; |
|
||||||
height: 1em; |
|
||||||
vertical-align: middle; |
|
||||||
fill: currentColor; |
|
||||||
margin-top: -0.25em; |
|
||||||
/* 4px */ |
|
||||||
margin-right: 0.25em; |
|
||||||
/* 4px */ |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* style 1 */ |
|
||||||
|
|
||||||
.inputfile-1 + label { |
|
||||||
color: #f1e5e6; |
|
||||||
background-color: #d3394c; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-1:focus + label, |
|
||||||
.inputfile-1.has-focus + label, |
|
||||||
.inputfile-1 + label:hover { |
|
||||||
background-color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* style 2 */ |
|
||||||
|
|
||||||
.inputfile-2 + label { |
|
||||||
color: #d3394c; |
|
||||||
border: 2px solid currentColor; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-2:focus + label, |
|
||||||
.inputfile-2.has-focus + label, |
|
||||||
.inputfile-2 + label:hover { |
|
||||||
color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* style 3 */ |
|
||||||
|
|
||||||
.inputfile-3 + label { |
|
||||||
color: #d3394c; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-3:focus + label, |
|
||||||
.inputfile-3.has-focus + label, |
|
||||||
.inputfile-3 + label:hover { |
|
||||||
color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* style 4 */ |
|
||||||
|
|
||||||
.inputfile-4 + label { |
|
||||||
color: #d3394c; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-4:focus + label, |
|
||||||
.inputfile-4.has-focus + label, |
|
||||||
.inputfile-4 + label:hover { |
|
||||||
color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-4 + label figure { |
|
||||||
width: 100px; |
|
||||||
height: 100px; |
|
||||||
border-radius: 50%; |
|
||||||
background-color: #d3394c; |
|
||||||
display: block; |
|
||||||
padding: 20px; |
|
||||||
margin: 0 auto 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-4:focus + label figure, |
|
||||||
.inputfile-4.has-focus + label figure, |
|
||||||
.inputfile-4 + label:hover figure { |
|
||||||
background-color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-4 + label svg { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
fill: #f1e5e6; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* style 5 */ |
|
||||||
|
|
||||||
.inputfile-5 + label { |
|
||||||
color: #d3394c; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-5:focus + label, |
|
||||||
.inputfile-5.has-focus + label, |
|
||||||
.inputfile-5 + label:hover { |
|
||||||
color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-5 + label figure { |
|
||||||
width: 100px; |
|
||||||
height: 135px; |
|
||||||
background-color: #d3394c; |
|
||||||
display: block; |
|
||||||
position: relative; |
|
||||||
padding: 30px; |
|
||||||
margin: 0 auto 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-5:focus + label figure, |
|
||||||
.inputfile-5.has-focus + label figure, |
|
||||||
.inputfile-5 + label:hover figure { |
|
||||||
background-color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-5 + label figure::before, |
|
||||||
.inputfile-5 + label figure::after { |
|
||||||
width: 0; |
|
||||||
height: 0; |
|
||||||
content: ''; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-5 + label figure::before { |
|
||||||
border-top: 20px solid #dfc8ca; |
|
||||||
border-left: 20px solid transparent; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-5 + label figure::after { |
|
||||||
border-bottom: 20px solid #722040; |
|
||||||
border-right: 20px solid transparent; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-5:focus + label figure::after, |
|
||||||
.inputfile-5.has-focus + label figure::after, |
|
||||||
.inputfile-5 + label:hover figure::after { |
|
||||||
border-bottom-color: #d3394c; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-5 + label svg { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
fill: #f1e5e6; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* style 6 */ |
|
||||||
|
|
||||||
.inputfile-6 + label { |
|
||||||
color: #d3394c; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-6 + label { |
|
||||||
border: 1px solid #d3394c; |
|
||||||
background-color: #f1e5e6; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-6:focus + label, |
|
||||||
.inputfile-6.has-focus + label, |
|
||||||
.inputfile-6 + label:hover { |
|
||||||
border-color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-6 + label span, |
|
||||||
.inputfile-6 + label strong { |
|
||||||
padding: 0.625rem 1.25rem; |
|
||||||
/* 10px 20px */ |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-6 + label span { |
|
||||||
width: 200px; |
|
||||||
min-height: 2em; |
|
||||||
display: inline-block; |
|
||||||
text-overflow: ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
overflow: hidden; |
|
||||||
vertical-align: top; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-6 + label strong { |
|
||||||
height: 100%; |
|
||||||
color: #f1e5e6; |
|
||||||
background-color: #d3394c; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.inputfile-6:focus + label strong, |
|
||||||
.inputfile-6.has-focus + label strong, |
|
||||||
.inputfile-6 + label:hover strong { |
|
||||||
background-color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 50em) { |
|
||||||
.inputfile-6 + label strong { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,221 +0,0 @@ |
|||||||
@font-face { |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
font-family: 'codropsicons'; |
|
||||||
src: url('../fonts/codropsicons/codropsicons.eot'); |
|
||||||
src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); |
|
||||||
} |
|
||||||
|
|
||||||
*, |
|
||||||
*:after, |
|
||||||
*:before { |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.clearfix:before, |
|
||||||
.clearfix:after { |
|
||||||
display: table; |
|
||||||
content: ''; |
|
||||||
} |
|
||||||
|
|
||||||
.clearfix:after { |
|
||||||
clear: both; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; |
|
||||||
color: #4b0f31; |
|
||||||
background-color: #f1e5e6; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
outline: none; |
|
||||||
color: #d3394c; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
a:hover, |
|
||||||
a:focus { |
|
||||||
color: #722040; |
|
||||||
} |
|
||||||
|
|
||||||
.hidden { |
|
||||||
position: absolute; |
|
||||||
overflow: hidden; |
|
||||||
width: 0; |
|
||||||
height: 0; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* Header */ |
|
||||||
|
|
||||||
.codrops-header { |
|
||||||
padding: 2em 1em 4em; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-header h1 { |
|
||||||
margin: 0.5em 0 0; |
|
||||||
letter-spacing: -1px; |
|
||||||
font-size: 3em; |
|
||||||
line-height: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-header h1 span { |
|
||||||
display: block; |
|
||||||
padding: 0.5em 0 1em; |
|
||||||
color: #999; |
|
||||||
font-weight: normal; |
|
||||||
font-size: 0.45em; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* Top Navigation Style */ |
|
||||||
|
|
||||||
.codrops-links { |
|
||||||
position: relative; |
|
||||||
display: inline-block; |
|
||||||
text-align: center; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-links::after { |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 50%; |
|
||||||
width: 1px; |
|
||||||
height: 100%; |
|
||||||
background: rgba(0, 0, 0, 0.1); |
|
||||||
content: ''; |
|
||||||
-webkit-transform: rotate3d(0, 0, 1, 22.5deg); |
|
||||||
transform: rotate3d(0, 0, 1, 22.5deg); |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-icon { |
|
||||||
display: inline-block; |
|
||||||
margin: 0.5em; |
|
||||||
padding: 0em 0; |
|
||||||
width: 1.5em; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-icon span { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-icon:before { |
|
||||||
margin: 0 5px; |
|
||||||
text-transform: none; |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
font-variant: normal; |
|
||||||
font-family: 'codropsicons'; |
|
||||||
line-height: 1; |
|
||||||
speak: none; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-icon--drop:before { |
|
||||||
content: "\e001"; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-icon--prev:before { |
|
||||||
content: "\e004"; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* Demo links */ |
|
||||||
|
|
||||||
.codrops-demos { |
|
||||||
margin: 2em 0 0; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-demos a { |
|
||||||
display: inline-block; |
|
||||||
margin: 0 0.5em; |
|
||||||
} |
|
||||||
|
|
||||||
.codrops-demos a.current-demo { |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* Content */ |
|
||||||
|
|
||||||
.content { |
|
||||||
width: 100%; |
|
||||||
max-width: 800px; |
|
||||||
text-align: center; |
|
||||||
margin: 0 auto; |
|
||||||
padding: 0 0 3em 0; |
|
||||||
} |
|
||||||
|
|
||||||
.content footer { |
|
||||||
color: #b39295; |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
.content footer a:hover, |
|
||||||
.content footer a:focus { |
|
||||||
color: #4b0f31; |
|
||||||
} |
|
||||||
|
|
||||||
.box { |
|
||||||
background-color: #dfc8ca; |
|
||||||
padding: 6.25rem 1.25rem; |
|
||||||
} |
|
||||||
|
|
||||||
.box + .box { |
|
||||||
margin-top: 2.5rem; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* Related demos */ |
|
||||||
|
|
||||||
.content--related { |
|
||||||
text-align: center; |
|
||||||
font-weight: bold; |
|
||||||
padding-top: 4em; |
|
||||||
} |
|
||||||
|
|
||||||
.media-item { |
|
||||||
display: inline-block; |
|
||||||
padding: 1em; |
|
||||||
vertical-align: top; |
|
||||||
-webkit-transition: color 0.3s; |
|
||||||
transition: color 0.3s; |
|
||||||
} |
|
||||||
|
|
||||||
.media-item__img { |
|
||||||
max-width: 100%; |
|
||||||
opacity: 0.6; |
|
||||||
-webkit-transition: opacity 0.3s; |
|
||||||
transition: opacity 0.3s; |
|
||||||
} |
|
||||||
|
|
||||||
.media-item:hover .media-item__img, |
|
||||||
.media-item:focus .media-item__img { |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.media-item__title { |
|
||||||
margin: 0; |
|
||||||
padding: 0.5em; |
|
||||||
font-size: 1em; |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 50em) { |
|
||||||
.codrops-header { |
|
||||||
padding: 3em 10% 4em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 40em) { |
|
||||||
.codrops-header h1 { |
|
||||||
font-size: 2.8em; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1 +0,0 @@ |
|||||||
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} |
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
Binary file not shown.
@ -1,6 +0,0 @@ |
|||||||
Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ |
|
||||||
License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL |
|
||||||
|
|
||||||
|
|
||||||
Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico |
|
||||||
License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ |
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 5.5 KiB |
@ -1,90 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en" class="no-js"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8" /> |
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
||||||
<title>Custom File Inputs | Codrops</title> |
|
||||||
<meta name="description" content="Demo for the tutorial: Styling and Customizing File Inputs the Smart Way" /> |
|
||||||
<meta name="keywords" content="cutom file input, styling, label, cross-browser, accessible, input type file" /> |
|
||||||
<meta name="author" content="Osvaldas Valutis for Codrops" /> |
|
||||||
<link rel="shortcut icon" href="favicon.ico"> |
|
||||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> |
|
||||||
<link rel="stylesheet" type="text/css" href="css/demo.css" /> |
|
||||||
<link rel="stylesheet" type="text/css" href="css/component.css" /> |
|
||||||
<!--[if IE]> |
|
||||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
|
||||||
<![endif]--> |
|
||||||
|
|
||||||
<!-- remove this if you use Modernizr --> |
|
||||||
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div class="container"> |
|
||||||
<header class="codrops-header"> |
|
||||||
<div class="codrops-links"> |
|
||||||
<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Tutorials/SVGRipples/" title="Previous Demo"><span>Previous Demo</span></a> |
|
||||||
<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=24831" title="Back to the article"><span>Back to the Codrops article</span></a> |
|
||||||
</div> |
|
||||||
<h1>Custom File Inputs</h1> |
|
||||||
<p>Demo for the tutorial: <strong><a href="http://tympanus.net/codrops/?p=24831">Styling and Customizing File Inputs the Smart Way</a></strong></p> |
|
||||||
</header> |
|
||||||
<div class="content"> |
|
||||||
|
|
||||||
|
|
||||||
<div class="box"> |
|
||||||
<input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" data-multiple-caption="{count} files selected" multiple /> |
|
||||||
<label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choose a file…</span></label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="box"> |
|
||||||
<input type="file" name="file-3[]" id="file-3" class="inputfile inputfile-3" data-multiple-caption="{count} files selected" multiple /> |
|
||||||
<label for="file-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choose a file…</span></label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="box"> |
|
||||||
<input type="file" name="file-4[]" id="file-4" class="inputfile inputfile-3" data-multiple-caption="{count} files selected" multiple /> |
|
||||||
<label for="file-4"><span>Choose a file…</span></label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="box"> |
|
||||||
<input type="file" name="file-5[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple /> |
|
||||||
<label for="file-5"><figure><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></figure> <span>Choose a file…</span></label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="box"> |
|
||||||
<input type="file" name="file-6[]" id="file-6" class="inputfile inputfile-5" data-multiple-caption="{count} files selected" multiple /> |
|
||||||
<label for="file-6"><figure><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></figure> <span></span></label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="box"> |
|
||||||
<input type="file" name="file-7[]" id="file-7" class="inputfile inputfile-6" data-multiple-caption="{count} files selected" multiple /> |
|
||||||
<label for="file-7"><span></span> <strong><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> Choose a file…</strong></label> |
|
||||||
</div> |
|
||||||
|
|
||||||
<footer>Upload icon by <a href="http://www.flaticon.com/free-icon/outbox_3686" target="_blank">FlatIcon</a>.</footer> |
|
||||||
|
|
||||||
</div> |
|
||||||
<!-- Related demos --> |
|
||||||
<section class="content content--related"> |
|
||||||
<p>If you enjoyed this demo you might also like:</p> |
|
||||||
<a class="media-item" href=""> |
|
||||||
<img class="media-item__img" src="img/related/SelectInspiration.png"> |
|
||||||
<h3 class="media-item__title">Inspiration for Custom Select Elements</h3> |
|
||||||
</a> |
|
||||||
<a class="media-item" href=""> |
|
||||||
<img class="media-item__img" src="img/related/TextInputEffects.jpg"> |
|
||||||
<h3 class="media-item__title">Inspiration for Text Input Effects</h3> |
|
||||||
</a> |
|
||||||
</section> |
|
||||||
</div><!-- /container --> |
|
||||||
|
|
||||||
<script src="js/custom-file-input.js"></script> |
|
||||||
|
|
||||||
<!-- // If you'd like to use jQuery, check out js/jquery.custom-file-input.js |
|
||||||
<script src="js/jquery-v1.min.js"></script> |
|
||||||
<script src="js/jquery.custom-file-input.js"></script> |
|
||||||
--> |
|
||||||
|
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Binary file not shown.
@ -1,34 +0,0 @@ |
|||||||
/* |
|
||||||
By Osvaldas Valutis, www.osvaldas.info |
|
||||||
Available for use under the MIT License |
|
||||||
*/ |
|
||||||
|
|
||||||
'use strict'; |
|
||||||
|
|
||||||
;( function ( document, window, index ) |
|
||||||
{ |
|
||||||
var inputs = document.querySelectorAll( '.inputfile' ); |
|
||||||
Array.prototype.forEach.call( inputs, function( input ) |
|
||||||
{ |
|
||||||
var label = input.nextElementSibling, |
|
||||||
labelVal = label.innerHTML; |
|
||||||
|
|
||||||
input.addEventListener( 'change', function( e ) |
|
||||||
{ |
|
||||||
var fileName = ''; |
|
||||||
if( this.files && this.files.length > 1 ) |
|
||||||
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); |
|
||||||
else |
|
||||||
fileName = e.target.value.split( '\\' ).pop(); |
|
||||||
|
|
||||||
if( fileName ) |
|
||||||
label.querySelector( 'span' ).innerHTML = fileName; |
|
||||||
else |
|
||||||
label.innerHTML = labelVal; |
|
||||||
}); |
|
||||||
|
|
||||||
// Firefox bug fix
|
|
||||||
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); }); |
|
||||||
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); }); |
|
||||||
}); |
|
||||||
}( document, window, 0 )); |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,36 +0,0 @@ |
|||||||
/* |
|
||||||
By Osvaldas Valutis, www.osvaldas.info |
|
||||||
Available for use under the MIT License |
|
||||||
*/ |
|
||||||
|
|
||||||
'use strict'; |
|
||||||
|
|
||||||
;( function( $, window, document, undefined ) |
|
||||||
{ |
|
||||||
$( '.inputfile' ).each( function() |
|
||||||
{ |
|
||||||
var $input = $( this ), |
|
||||||
$label = $input.next( 'label' ), |
|
||||||
labelVal = $label.html(); |
|
||||||
|
|
||||||
$input.on( 'change', function( e ) |
|
||||||
{ |
|
||||||
var fileName = ''; |
|
||||||
|
|
||||||
if( this.files && this.files.length > 1 ) |
|
||||||
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); |
|
||||||
else if( e.target.value ) |
|
||||||
fileName = e.target.value.split( '\\' ).pop(); |
|
||||||
|
|
||||||
if( fileName ) |
|
||||||
$label.find( 'span' ).html( fileName ); |
|
||||||
else |
|
||||||
$label.html( labelVal ); |
|
||||||
}); |
|
||||||
|
|
||||||
// Firefox bug fix
|
|
||||||
$input |
|
||||||
.on( 'focus', function(){ $input.addClass( 'has-focus' ); }) |
|
||||||
.on( 'blur', function(){ $input.removeClass( 'has-focus' ); }); |
|
||||||
}); |
|
||||||
})( jQuery, window, document ); |
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 322 KiB After Width: | Height: | Size: 322 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue