Bugünün güzel haberlerinden birisi de “file-selector-button” selektörünün devreye girmiş olması olsa gerek. Bu özellik aracılığı ile o çirkin dosya yükleme butonuna biraz daha şekil verebileceğiz.

HTML

<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload">
</form>

CSS

input[type=file]::file-selector-button {
  border: none;
  padding: 8px 16px;
  margin: 8px;
  border-radius: 4px;
  background-color: #FFF;
  transition: .3s;
  filter: drop-shadow(0 0 4px #4444dd); 
}

See the Pen CSS File Input - file-selector-button by Ibrahim Nergiz (@phyesix) on CodePen.

https://cpwebassets.codepen.io/assets/embed/ei.js