How to create a drag and drop in html

Drag and drop in html using CSS.

At first we have tried to find a solution for a simple and easy way to create a drag and drop input for a website. Now we create a simple tricks using css.

Html:-

<div class="files">

   <input type="file"  name="files[]" multiple/>

</div>

CSS:-

<style type="text/css">

.files input {

outline: 2px dashed #92b0b3;

padding: 200px 0px 85px 50%;

text-align: center !important;

margin: 0;

width: 100% !important;

}

.files input:focus{     

outline: 2px dashed #92b0b3;  

}

.files{ position:relative}

.color input{ background-color:#f1f1f1;}

.files:before {

position: absolute;

bottom: 20px;

left: 0;  pointer-events: none;

width: 100%;

right: 0;

height: 150px;

content: " {{ __('Click Or Drop Files To Upload.') }} ";

display: block;

margin: 0 auto;

color: #76838f;

text-transform: capitalize;

text-align: center;

background: white;

font-size: 24px;

}

</style>