Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*Button*/
- .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;
- }
- input[type='file']{
- display:none;
- }
- /*HTML*/
- <div class="box">
- <input type="file" name="file1" id="file1" class="inputfile inputfile-6" multiple="multiple"/>
- <label for="file1"> <strong><svg xmlns="http://www.w3.org/2000/svg" width="17" 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> Wybierz pliki…</strong></label>
- </div>
- /*JS*/
- '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 ));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement