How To Design Input Type File In WordPress

In this article, We learn about How to design input type file in WordPress.

As we know HTML and CSS do not provide design for input type file.

But it’s possible with some custom modification for that.

Let’s see…

Here We use the Contact form 7 plugin for the form.

Here is HTML:

<div class="custom-file-wrap"><label class="custom-file-text"><span class="dashicons dashicons-download"></span> <span class="type-text">Select Attachment</span></label>[file* custom-file]</div>

Here is CSS:

.custom-file-wrap {
    position: relative;
    height: 100px;
}
.custom-file-text {
    border: 2px dotted #0675c0;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.custom-file-wrap input {
    opacity: 0;
}
.type-text {
    padding-left: 10px;
}

Here is jQuery:

jQuery(document).ready(function($) {
    $( '.custom-file-text' ).click( function() {
        $( this ).siblings( 'span' ).children( 'input' ).trigger( 'click' );
    });

    $( '.custom-file-wrap input[type="file"]' ).on( 'change', function() {
  var fileName = $(this).val().split("\\").pop();
  $( '.custom-file-text .type-text' ).html( fileName );
    } );
});

Here is the Output: