JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div class="InputContenedor">
<input type="file" id="Abrir">
<label for="Abrir">Examinar</label>
<p id="FileName">Selecione un Archivo...</p>
</div>

CSS

.InputContenedor{
  position:relative;
  width:400px;
  height:30px;
}
#Abrir{
  display: none;
}
#FileName{
  font-family:helvetica;
  background-color:#DEDEDE;
  padding:4px 15px;
  border-radius:0 2px 2px 0;
  margin:0;
  max-width:67%;
  float:left;
  overflow:hidden;
  display:inline;
  color:#999;
}
label{
  background-color:#0074D9;
  padding:4px 20px;
  color:white;
  border-radius:2px 0 0 2px;
  font-family:helvetica;
  float:left;
  width:15%;
  display:inline;
 }

JavaScript

function Id(id){
	return document.getElementById(id);
}
Id("Abrir").onchange = function(){
	Id("FileName").innerHTML = this.value;
	Id("FileName").setAttribute("title",this.value);
}