I am trying to modify this input of type file:
@import url('https://fonts.googleapis.com/css?family=El+Messiri:600');
html, body {
margin: 0 auto;
padding: 0 auto;
}
body {
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
}
/*Elementos Etiquetas*/
h1 {
font-family: 'El Messiri', sans-serif;
color:white;
}
/*Inputs*/
input[type=file] {
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Imagenes Momentáneas</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="src/styles/styles.css">
</head>
<body>
<div class="container">
<h1 class="row justify-content-center mt-5"><span>Imagenes Momentáneas<span></h1>
<div class="row">
<div class="col-12 card">
<div class="card-body">
<h3 class="row justify-content-center mt-1"> Sube tu Imagen</h3>
<div class="row justify-content-center mt-5">
<input type="file" class="btn btn-danger" value="x">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script src="src/scripts/main.js"></script>
</body>
</html>
As you can see, I tried to add styles to it so that it looked like a button, but I couldn't remove the part that says select file.
And if we better hide the
input
and style thelabel
.The important thing here is that it
label
has in its attributefor
the id of theinput