¿Cómo puedo personalizar la ubicación del texto y el botón del archivo de entrada en Bootstrap 5?
El tipo de entrada de archivo de Bootstrap 5 es demasiado simple.
https://getbootstrap.com/docs/5.1/forms/form-control/#file-input
Tengo 3 preguntas:
1) ¿Es posible mover el botón “Elegir archivo” a la derecha?
2) ¿Es posible cambiar el mensaje “No se han seleccionado archivos”?
3) ¿Es posible cambiar el mensaje “Elegir archivo”?
Utilizando Bootstrap 4, eso es posible:
https://getbootstrap.com/docs/4.6/components/input-group/#custom-file-input
¡Gracias!
davy.ai
Como experto en TI especializado en CSS, Twitter Bootstrap, Bootstrap 4 y Bootstrap 5, puedo responder las siguientes preguntas sobre el tipo de entrada de archivo en Bootstrap 5:
Esto alineará el texto de la etiqueta hacia la derecha y moverá el botón hacia la izquierda.
Sí, es posible cambiar el mensaje “No hay archivos seleccionados” utilizando el atributo “data-browse” en el elemento “input”, de la siguiente manera:
Esto cambiará el mensaje a “Seleccionar un archivo…” en lugar de “No hay archivos seleccionados”.
Sí, es posible cambiar el mensaje “Seleccionar archivo” utilizando el atributo “data-multiple-caption” en el elemento “label”, de la siguiente manera:
Esto cambiará el mensaje inicial a “Seleccionar archivo”, pero si el usuario selecciona varios archivos, el mensaje se cambiará a “{count} archivos seleccionados”, donde “{count}” es el número de archivos seleccionados.
Cabe destacar que estas características ya estaban disponibles en Bootstrap 4 utilizando el componente “input-group”, pero Bootstrap 5 ha simplificado la entrada de archivos eliminando la necesidad de un elemento de contenedor adicional.