Como pódria quitar el texto que aparece por defecto al subir un archivo
Stack Overflow en español Asked on August 26, 2021
[
En la imagen de ejemplo anterior creo que ya se ve el problema con claridad. Se superpone el texto de seleccionar archivo, no es un texto mio, viene definido ya. como puedo hacer para que no se ponga por encima el texto de seleccionar archivo?
Este es el código:
<div class="row">
<div class="col-sm-3"><!--left col-->
<div class="text-center">
<img src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="avatar img-circle img-thumbnail" alt="avatar">
<h6>Cambia tu foto de perfil...</h6>
<input type="file" class="text-center center-block file-upload">
</div><br>
</div><!--/col-3-->
<div class="col-sm-9">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Perfil</a></li>
<li><a data-toggle="tab" href="#messages" style="margin-left:1rem">Editar perfil</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>Nombre:</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Apellidos:</h4></label>
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Correo electrónico:</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="locate"><h4>Localidad</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="cp"><h4>Código postal:</h4></label>
</div>
</div>
</form>
<hr>
</div><!--/tab-pane-->
<div class="tab-pane" id="messages">
<h2></h2>
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>Nombre</h4></label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="Introduce tu nombre" title="enter your first name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Apellidos</h4></label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Introduce tus dos apellidos" title="enter your last name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Correo electrónico</h4></label>
<input type="email" class="form-control" name="email" id="email" placeholder="[email protected]" title="enter your email.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Localidad</h4></label>
<input type="email" class="form-control" id="location" placeholder="Introduce tu localidad" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="cp"><h4>Código postal</h4></label>
<input type="text" class="form-control" id="cp" placeholder="Introduce tu código postal" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password"><h4>Contraseña</h4></label>
<input type="password" class="form-control" name="password" id="password" placeholder="Introduce tu contraseña" title="enter your password.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password2"><h4>Repite la contraseña</h4></label>
<input type="password" class="form-control" name="password2" id="password2" placeholder="Introduce la contraseña anterior" title="enter your password2.">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<br>
<button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Guardar</button>
<button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Restablecer</button>
</div>
</div>
</form>
</div><!--/tab-pane-->
</div><!--/tab-pane-->
</div><!--/tab-content-->
</div><!--/col-9-->
</div><!--/row-->
One Answer
La solución más sencilla es hacerte un "input custom" a través de HTML y CSS. En mi caso, envolví el <input type="file"> en un <label> y a este le di aspecto de botón, ocultando el input "real".
Haciendo uso de HTML y CSS
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-sm-3"><!--left col-->
<div class="text-center">
<img src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="avatar img-circle img-thumbnail" alt="avatar">
<h6>Cambia tu foto de perfil...</h6>
<label class="custom-file-upload">
<input type="file"/>
Subir archivo
</label>
</div><br>
</div><!--/col-3-->
<div class="col-sm-9">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Perfil</a></li>
<li><a data-toggle="tab" href="#messages" style="margin-left:1rem">Editar perfil</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>Nombre:</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Apellidos:</h4></label>
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Correo electrónico:</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="locate"><h4>Localidad</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="cp"><h4>Código postal:</h4></label>
</div>
</div>
</form>
<hr>
</div><!--/tab-pane-->
<div class="tab-pane" id="messages">
<h2></h2>
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>Nombre</h4></label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="Introduce tu nombre" title="enter your first name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Apellidos</h4></label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Introduce tus dos apellidos" title="enter your last name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Correo electrónico</h4></label>
<input type="email" class="form-control" name="email" id="email" placeholder="[email protected]" title="enter your email.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Localidad</h4></label>
<input type="email" class="form-control" id="location" placeholder="Introduce tu localidad" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="cp"><h4>Código postal</h4></label>
<input type="text" class="form-control" id="cp" placeholder="Introduce tu código postal" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password"><h4>Contraseña</h4></label>
<input type="password" class="form-control" name="password" id="password" placeholder="Introduce tu contraseña" title="enter your password.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password2"><h4>Repite la contraseña</h4></label>
<input type="password" class="form-control" name="password2" id="password2" placeholder="Introduce la contraseña anterior" title="enter your password2.">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<br>
<button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Guardar</button>
<button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Restablecer</button>
</div>
</div>
</form>
</div><!--/tab-pane-->
</div><!--/tab-pane-->
</div><!--/tab-content-->
</div><!--/col-9-->
</div><!--/row-->Haciendo uso de HTML, CSS y JS (JQuery)
$(function () {
$('input[type=file]').change(function(){
let nombre_fichero = $(this).val().split('\').pop();
$('.custom-file-upload').next('span').html(nombre_fichero);
});
});input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-sm-3"><!--left col-->
<div class="text-center">
<img src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="avatar img-circle img-thumbnail" alt="avatar">
<h6>Cambia tu foto de perfil...</h6>
<label class="custom-file-upload">
<input type="file"/>
Subir archivo
</label>
<span>Ningún fichero seleccionado</span>
</div><br>
</div><!--/col-3-->
<div class="col-sm-9">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Perfil</a></li>
<li><a data-toggle="tab" href="#messages" style="margin-left:1rem">Editar perfil</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>Nombre:</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Apellidos:</h4></label>
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Correo electrónico:</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="locate"><h4>Localidad</h4></label>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="cp"><h4>Código postal:</h4></label>
</div>
</div>
</form>
<hr>
</div><!--/tab-pane-->
<div class="tab-pane" id="messages">
<h2></h2>
<hr>
<form class="form" action="##" method="post" id="registrationForm">
<div class="form-group">
<div class="col-xs-6">
<label for="first_name"><h4>Nombre</h4></label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="Introduce tu nombre" title="enter your first name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="last_name"><h4>Apellidos</h4></label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Introduce tus dos apellidos" title="enter your last name if any.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Correo electrónico</h4></label>
<input type="email" class="form-control" name="email" id="email" placeholder="[email protected]" title="enter your email.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="email"><h4>Localidad</h4></label>
<input type="email" class="form-control" id="location" placeholder="Introduce tu localidad" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="cp"><h4>Código postal</h4></label>
<input type="text" class="form-control" id="cp" placeholder="Introduce tu código postal" title="enter a location">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password"><h4>Contraseña</h4></label>
<input type="password" class="form-control" name="password" id="password" placeholder="Introduce tu contraseña" title="enter your password.">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="password2"><h4>Repite la contraseña</h4></label>
<input type="password" class="form-control" name="password2" id="password2" placeholder="Introduce la contraseña anterior" title="enter your password2.">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<br>
<button class="btn btn-lg btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign"></i> Guardar</button>
<button class="btn btn-lg" type="reset"><i class="glyphicon glyphicon-repeat"></i> Restablecer</button>
</div>
</div>
</form>
</div><!--/tab-pane-->
</div><!--/tab-pane-->
</div><!--/tab-content-->
</div><!--/col-9-->
</div><!--/row-->Correct answer by phpMyGuel on August 26, 2021
Add your own answers!
Ask a Question
Get help from others!
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?
Recent Answers
- Joshua Engel on Why fry rice before boiling?
- Peter Machado on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?