html - HTML 输入 Type="file" 按钮过大，不能改变按钮的宽度

Question

我在 HTML 中创建了这个按钮来上传文件：

<input type="file" id="myFile" name="filename" accept=".jpg, .jpeg, .png">

我有两个问题，我不明白如何解决它们

1. 在按钮的右侧，它显示“未选择文件”，我没有问题，但由于某种原因，我可以单击“未选择文件”文本，甚至可以单击文本右侧的一点，然后它将打开上传屏幕，就像我单击按钮本身一样。如何更改它，使其仅单击按钮？

这是按钮，边框内的任何内容都算作点击

2. 如何更改按钮的宽度？我尝试同时使用两者maxlength = "4" ，width = 40px但它似乎对按钮宽度没有任何影响。

标签： htmlcssinput-type-file

Answer 1

可能这会帮助你

 <style>
        div{
            background-color: gray;
            width: 400px;
        }
      input{
     box-sizing: content-box;
       max-width:180px;
     border:2px solid red;
             }
    </style>
    <div>
    <input type="file" id="myFile" name="filename" accept=".jpg, .jpeg, .png">
    </div>

让我知道这是否对您有用。