0

I'm doing a form and i can't change the side text that appears with the type="file" input.

This Text

Thats my code.

    <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>
Flavio Caruso
  • 789
  • 5
  • 21

2 Answers2

1

See if this can help you.

You can put label inside a using bootstrap, then you can use "display: none;" at the input. Then, you can write what you want, making it smaller.

See the code:

<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>
Baccan
  • 156
  • 1
  • 8
0

There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.

input[type='file'] {
color: transparent;
}
Jitrenka
  • 185
  • 1
  • 10