文件选择按钮阴影被截断问题求助（基于Tailwind CSS）

我用Tailwind CSS给文件输入按钮套用了应用内通用的按钮样式，正常按钮hover时阴影能完整显示，但文件输入按钮的阴影却被截断了，明明没有设置overflow:hidden。

原代码 #

文件输入组件：

<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按钮样式：

.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)];
}

解决方案 #

方案1：用Label模拟文件按钮（推荐）

原生input[type="file"]的样式受浏览器默认布局限制，伪元素的溢出规则不好控制。直接隐藏原生输入框，用<label>绑定它来模拟按钮，就能完全复用现有样式，阴影不会被截断：

<div className="flex flex-col gap-y-2">
  <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="hidden"
  />
  {/* 用Label作为可点击按钮，完全复用btn-style */}
  <label htmlFor="art_cover" className="btn-style text-primary-light inline-flex items-center gap-2">
    选择封面
    {/* 可选：添加图标增强交互感 */}
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
    </svg>
  </label>
</div>

方案2：强制设置溢出可见（针对原生伪元素方式）

如果一定要保留原生文件输入的样式结构，需要给输入框本身和它的file:伪元素都加上overflow-visible，覆盖浏览器默认的溢出限制：

<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 overflow-visible file:border-solid file:btn-style file:text-primary-light file:mr-3 file:overflow-visible"
/>

说明 #

浏览器对input[type="file"]的内部渲染有特殊处理，即使没显式设置overflow:hidden，伪元素的容器可能默认有溢出裁剪。用Label模拟的方式能彻底避开这个问题，同时样式自由度更高。

内容的提问来源于stack exchange，提问作者Akasiek