0

::-webkit-file-upload-button {
  font: caption;
  -webkit-appearance: button;
  background: black !important;
  color: white;
  border-color: black !important;
  padding: 7px 10px;
}
<input class="form-control text-center col-md-6" type="file" value="Adjuntar documento">

2 respuestas 2

2

Realmente es algo intrínseco de cada navegador, pero con algunos trucos de HTML/CSS/JS quizás puedas lograr tu objetivo. Vamos a ver

HTML:

<input type=file hidden id=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

CSS:

// example style
* {
  border-radius:10px;
}
#selected{
  text-transform:uppercase;
  color:teal;
  padding:0 5px;
  border: { 
    width:1px;
    style:solid;
    color:grey;
  }
  font:{
    family:Consolas;
    size:0.8em;
  }
}
[value=getFile]{
  background:teal;
  cursor:pointer;
  color:white;
  padding:0 5px;
  font-family:Trebuchet MS;
  border:0;
  &:hover{
    background:#0aa;
  }
}

JS:

var getFile = new selectFile;
getFile.targets('choose','selected');

Aquí lo puedes probar: JSFIDDLE

Éxitos!

3
  • Veo que se necesita si o si de la librería selectFile, ¿Habría alguna manera de que se pueda realizar sin alguna librería?
    – Belen
    Commented el 1 jul. 2021 a las 23:53
  • 1
    Vuelvo y repito: Ese "Label" es una parte intrínseca de cada navegador (web Browser) y no se modifica con simple programación. El volver a inventar la rueda y todo el proceso, componentes, lógica, etc. que involucra la librería (que para evitar eso es que existen) entonces necesitamos otra pregunta. Creo que la pregunta como tal ya ha sido respondida. Commented el 3 jul. 2021 a las 0:16
  • 1
    Puede esconder el botón original, y poner otro modificable, cuando de click en ese nuevo botón ejecuta el evento click el el botón original escondido. Commented el 7 jul. 2021 a las 4:41
1

No se puede cambiar directamente el texto de un elemento 'input'.

Una alternativa es poner un botón secundario mientras el original está escondido, y con javascript direccionar el evento al hacer click y si desea poner un texto al lado tal cual el input escondido.

#botonpersonal{
    font: caption;
    -webkit-appearance: button;
    background: black !important;
    color: white;
    border-color: black !important;
    padding: 7px 10px;
}
<input hidden id="btnoriginal" class="form-control text-center col-md-6" onChange="document.getElementById('tagsmall').innerText=document.getElementById('btnoriginal').files[0]['name'];" type="file" value="Adjuntar documento">
<button id='botonpersonal' onClick="document.getElementById('btnoriginal').click();">Adjuntar documento</button>
<small id='tagsmall'>No hay archivos adjuntos</small>

Puedes acceder a el archivo por medio del DOMInputElement.files.

1
  • No se si sea una buena práctica y si algún algoritmo lo 'sancione' como inseguro. El sentido común es que no es posible para evitar cosas como pishing y mal intenciones. Por ejemplo, si alguien quisiera cambiar el texto de "sí" por "no" cuando sale que "¿deseas activar notificaciones?", sería un caos si se pudiera editar... Commented el 7 jul. 2021 a las 5:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.