File Drop Zone
Drag-and-drop file input with a custom dashed boundary. Native `<input type="file">` underneath, the visible filename appearing via `:has()` — accessible, keyboard-friendly, and minimal.
File Drop Zone the 15th of 28 designs in the 28 CSS Input Field Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="if-file">
<input type="file" name="upload" accept="image/*,.pdf" />
<span class="if-file-icon" aria-hidden="true">
<svg
viewBox="0 0 24 24"
width="22"
height="22"
fill="none"
stroke="currentColor"
stroke-width="1.6"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="17 8 12 3 7 8" />
<line x1="12" y1="3" x2="12" y2="15" />
</svg>
</span>
<span class="if-file-text">
<strong>Click to upload</strong> or drag & drop
<span class="if-file-types">PNG, JPG, or PDF · max 10 MB</span>
</span>
</label> .if-file {
position: relative;
display: block;
width: 100%;
max-width: 320px;
cursor: pointer;
border: 1.5px dashed rgba(99, 102, 241, 0.5);
border-radius: 12px;
padding: 22px 18px;
background: rgba(99, 102, 241, 0.05);
text-align: center;
transition:
border-color 0.2s,
background 0.2s,
transform 0.15s;
}
.if-file:hover {
border-color: #818cf8;
background: rgba(99, 102, 241, 0.1);
}
.if-file:focus-within {
border-color: #818cf8;
background: rgba(99, 102, 241, 0.12);
box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18);
}
.if-file input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.if-file-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin: 0 auto 8px;
border-radius: 10px;
background: rgba(99, 102, 241, 0.18);
color: #a5b4fc;
}
.if-file-text {
display: block;
font-size: 13px;
color: #c8c0ff;
}
.if-file-text strong {
color: #a5b4fc;
font-weight: 600;
}
.if-file-types {
display: block;
font-size: 11px;
color: #b8b6d4;
margin-top: 4px;
}