如何在Chakra UI中自定义<input type='file'>生成的Choose files按钮样式？

原生<input type="file">的内部按钮样式受浏览器安全机制限制，直接通过input#file-upload-button这类选择器修改几乎无法生效，更可靠的方式是隐藏原生输入框，用自定义元素模拟按钮并触发原生输入框的点击事件，以下是两种可行方案：

一、纯CSS方案 #

通过父容器和标签元素模拟按钮样式，将原生输入框透明覆盖在上方：

/* 隐藏原生文件输入框 */
#file-input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 按钮容器 */
.file-input-wrapper {
  position: relative;
  display: inline-block;
}

/* 自定义按钮样式 */
.file-input-label {
  padding: 8px 16px;
  background-color: #3182ce;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.file-input-label:hover {
  background-color: #2b6cb0;
}

对应的HTML结构：

<div class="file-input-wrapper">
  <label class="file-input-label" for="file-input">Choose files</label>
  <input type="file" id="file-input" multiple />
</div>

二、Chakra UI 组件方案 #

利用Chakra的按钮组件和useRef触发原生输入框的点击，更贴合框架生态：

import { Button, Box, VisuallyHidden } from '@chakra-ui/react';
import { useRef } from 'react';

function CustomFileUpload() {
  const fileInputRef = useRef(null);

  const triggerFileInput = () => {
    fileInputRef.current?.click();
  };

  return (
    <Box>
      <Button
        onClick={triggerFileInput}
        colorScheme="blue"
        variant="solid"
        cursor="pointer"
      >
        Choose files
      </Button>
      {/* 用Chakra内置组件隐藏原生输入框 */}
      <VisuallyHidden>
        <input
          type="file"
          ref={fileInputRef}
          multiple
        />
      </VisuallyHidden>
    </Box>
  );
}

你可以根据需求修改Button的colorScheme、variant、padding等属性，完全自定义按钮外观。

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