无法更改 type"file" 输入的侧边文本

Question

我正在做一个表单，但我无法更改随 type="file" 输入出现的侧边文本。

This Text

那是我的代码。

    <div class="form-group text-left">
   <label style="margin-left:16px">CPF*</label><br>
    <div class="col-md-8 inputGroupContainer">
     <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-id-card-o"></i></span>
      <input  name="cpf" placeholder="Informe seu CPF" class="form-control" id="cpf" required="required">
            <input id="arquivo_cpf" type="file" name="arquivo_cpf" required="required" >
     </div>
    </div>
  </div>

Answer 1

没有跨浏览器的方式来做到这一点。 "no file selected" 文本位于小部件的实现定义部分，我认为大多数浏览器不会提供太多特定于浏览器的自定义方式。另一方面，当 value 属性为空时，您可以简单地使用 CSS 用某些东西覆盖文本。

input[type='file'] {
color: transparent;
}

Answer 2

看看能不能帮到你。

你可以把 label 放在一个 using bootstrap 里面，然后你可以在输入处使用 "display: none;"。然后，你可以写你想要的，把它变小。

见代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group text-left">
   <label style="margin-left:16px">CPF*</label><br>
    <div class="col-md-8 inputGroupContainer">
     <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-id-card-o"></i></span>
      <input  name="cpf" placeholder="Informe seu CPF" class="form-control" id="cpf" required="required">
            <span class="input-group-btn"><label class="btn btn-default btn-file ">
              Choose file<input type="file" id="arquivo_cpf" name="arquivo_cpf" style="display:none" required="require">
    </label></span>
     </div>
    </div>
  </div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<span class="input-group-btn"><label class="btn btn-default btn-file ">
              Choose File<input type="file" id="arquivo_cpf" name="arquivo_cpf" style="display:none" required="require">
    </label></span>

无法更改 type"file" 输入的侧边文本

Can't change the side text from type"file" input

html

forms

types

input

form-control