Search code examples
htmlformsinputtypesform-control

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

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>

Solution

  • 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>