这是一个可能对你有帮助的替代解决方案。这将隐藏按钮外的文本，将其与div的背景色混合。然后你可以给div一个你喜欢的标题。

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
    <span>Your name</span>
    <input id="uploadBtn" type="file" class="upload" />
</div>

JS

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

更多的http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

只有CSS和bootstrap类

< =铁路”链接stylesheet " href = " https://cdn.jsdelivr.net/npm/bootstrap@4 6。0 /区/ css / min bootstrap。css”诚信=“sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L - Z6nronJ3oUOFUFpCjEUQouq2 + l”crossorigin =“匿名”> <div class="col-md-4 inputting -group"> <输入类别=“form控制”类型=“文本”/> < div级= input-group-btn”> <标签for=“文件” <输入id=“文件”类型=“文件”/> < / div > < / div >

使用<label>作为标题

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

这种工作不需要任何javascript。你可以随心所欲地把标签装饰成任何复杂程度。当您单击标签时，单击会自动重定向到文件输入。任何方法都可以使文件输入本身不可见。如果你想让标签看起来像一个按钮，有很多解决方案，例如:

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

在Bootstrap +4.5中，你可以简单地将这个添加到你的代码中:

.custom-file-input ~。{后custom-file-label:: 内容:“您的自定义文本…”; ｝ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="匿名"> < div class = "定义文件”> <input type="file" class="custom-file-input"> <label class="custom-file-label">自定义占位符 < / div >

你可以简单地添加一些css技巧。你不需要javascript或更多的输入文件，我保持现有的值属性。您只需要添加css。你可以试试这个解决方案。

.btn-file-upload { 宽度:187 px; 位置:相对; ｝ .btn-file-upload:{后 内容:attr(价值); 位置:绝对的; 上图:0; 左:0; 底部:0; 宽度:48%; 背景:# 795548; 颜色:白色; border - radius: 2 px; text-align:中心; 字体大小:12 px; 行高:2; ｝ <input type="file" class="btn-file-upload" value="Uploadfile" />