A tutorial on how to style and customize <input type=”file”> in a very semantic, accessible way using the element with CSS only. No need to add a single line jquery code. There are quite few examples for “customizing” the <input type=”file” /> element.
HTML Code
<input type="file" id="file" /> <label for="file" class="btn">choose a file</label> <br> <input type="file" id="file" /> <label for="file" class="btn-1">upload file</label> <br><br> <input type="file" id="file" /> <label for="file" class="btn-2">upload file</label> <br> <input type="file" id="file" /> <label for="file" class="btn-3">select file</label>
CSS Code
[type="file"] { height: 0; overflow: hidden; width: 0; } label { font-family: "lato", sans-serif; border: none; text-transform: uppercase; font-size: 14px; font-weight: bold; letter-spacing: 2px; border-radius: 5px; color: #fff; cursor: pointer; display: inline-block; margin-bottom: 15px; outline: none; padding: 15px 50px; position: relative; transition: all 0.3s; } .btn{ background: #f7347a; } .btn:hover{ background: #800080; } .btn-1 { background: #ffd700; box-shadow: 0 6px #ffa500; } .btn-1:hover { box-shadow: 0 0 #ffa500; } .btn-2 { background: #800080; border-radius: 100px; } .btn-2:hover { background: #ff80ed; } .btn-3 { background: #008000; border-radius: 0px; } .btn-3:hover { background: #065535; }