Skip to content

Style file input button with css

This can be done using the file-selector-button CSS pseudo-element.


With Tailwind this can be done using the file modifier.

From the documentation:

<form class="flex items-center space-x-6">
  <div class="shrink-0">
    <img class="h-16 w-16 object-cover rounded-full" src="" alt="Current profile photo" />
  <label class="block">
    <span class="sr-only">Choose profile photo</span>
    <input type="file" class="block w-full text-sm text-slate-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-full file:border-0
      file:text-sm file:font-semibold
      file:bg-violet-50 file:text-violet-700