Styling file input: Shadow of "choose file" is cut off

Question

I tried to style file input button to look kind of like all buttons in my app. I use tailwind for styling.

Below example of button on hover:

The shadow is not hidden or cut off. But if I try to use the same style on file input - it looks like this:

The shadow is cut off. Looks like there is an overflow hidden but there isn't.

File input code:

<div className="flex flex-col gap-y-2 overflow-visible">
  <label htmlFor="art_cover">Art cover</label>
  <input
    type="file"
    name="art_cover"
    id="art_cover"
    onChange={({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
      currentTarget.files && formik.setFieldValue('art_cover', currentTarget.files[0]);
    }}
    className="text-gray-400 file:border-solid file:btn-style file:text-primary-light file:mr-3"
  />
</div>

Tailwind reused style that I use for buttons:

.btn-style {
  @apply rounded-full bg-transparent border-2 border-primary-accent font-bold px-4 md:px-5 py-1 md:py-1.5 cursor-pointer
  transition text-center text-sm md:text-base hover:bg-primary-accent hover:text-secondary-dark hover:shadow-accent;
}

.shadow-accent {
  @apply drop-shadow-[0_0_15px_rgba(78,255,166,0.3)];
}

Use devtools to inspect. Overflow-hidden is the only option I can think of. — Amini, Nov 20 '22 at 14:15

score 0 · Accepted Answer · answered Nov 25 '22 at 15:16

Fixed by changing my input implementation using this answer.

<div className="flex flex-col gap-y-2">
    <label htmlFor="art_cover">Art cover</label>
    <label htmlFor="art_cover" className="flex items-center">
        <div className="btn-style text-primary-light mr-3">Choose file</div>
        <p className="text-gray-400">{formik.values.art_cover === undefined ? 'No file chosen' : formik.values.art_cover['name']}</p>
    </label>
    <input
        type="file"
        name="art_cover"
        id="art_cover"
        onChange={({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
            currentTarget.files && formik.setFieldValue('art_cover', currentTarget.files[0]);
        }}
        className="hidden"
    />
</div>

Works like a charm

Styling file input: Shadow of "choose file" is cut off

1 Answers1