是否可以设置“选择文件”输入按钮的样式？ [复制]

Posted 2023-02-22

【中文标题】是否可以设置“选择文件”输入按钮的样式？ [复制]

【英文标题】：Is it possible to style "Choose File" input buttons? [duplicate]

【发布时间】：2021-09-18 22:10:12

【问题描述】：

我使用的是 Material-UI，所以常规方法不起作用。 我的表单中有两个相邻的按钮。第一个是“选择文件”输入，允许用户上传文件，第二个是提交按钮。我想将两个按钮的样式设置为相同，但是由于“选择文件”是输入，因此可以这样做吗？我可以使用 CSS 来编辑选择文件按钮吗？

<Grid item xs=12>
                <FormControl>
                  <Input 
                    name='uploadFile'
                    type='file'
                    required=true
                    onChange=(e) => setUploadFile(e.target.files)
                    />
                </FormControl>
              </Grid>

              <Grid item xs=12>
                <Button
                  variant="contained"
                  color="primary"
                  type="submit"
                  disabled=submitting
                >
                  Submit
                </Button>
              </Grid>

我试过这个，但它只编辑文本的颜色：

input[type="file"] 
  top: 10px;
  left: 8px;
  font-size: 17px;
  color: #b3e5fc;

【问题讨论】：

封闭问题中的相关答案：***.com/questions/572768/…。如果你看不到，here's a link to a working example 由答案提供。

@chazsolo 我正在使用 Material UI，所以一些标准的东西不起作用

【参考方案1】：

你可以看看这里 How to enable file upload on React's Material UI simple input?

还有一个非常方便且可自定义的包，用于在 react 中上传，名为 dropzone

你可以在这里找到很好的例子https://react-dropzone.js.org/

【参考方案2】：

可以。这是自定义输入类型文件的示例。

<div class="file-input">
      <input
        type="file"
        name="file-input"
        id="file-input"
        class="file-input__input"
      />
      <label class="file-input__label" for="file-input">
        <svg
          aria-hidden="true"
          focusable="false"
          data-prefix="fas"
          data-icon="upload"
          class="svg-inline--fa fa-upload fa-w-16"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            fill="currentColor"
            d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
          ></path>
        </svg>
        <span>Upload file</span></label
      >
    </div>

body 
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;


.file-input__input 
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;


.file-input__label 
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  padding: 10px 12px;
  background-color: #4245a8;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);


.file-input__label svg 
  height: 16px;
  margin-right: 4px;