La caja de selección de archivos de tipo archivo <input> tiene un problema muy criticado, es decir, el estilo por defecto del navegador es demasiado feo y no se puede personalizar.
El efecto en tiempo real es el siguiente:
::file-selector-buttonLos pseudoelementos surgieron para hacer coincidir específicamente el botón con el estilo del cuadro de entrada de selección de archivos.
El HTML es el siguiente:
<input type="file">Código CSS:
/* 后面的提示文字颜色 */
[type="file"] {
color: gray;
}
/* 主按钮的样式自定义 */
::file-selector-button {
height: 3rem;
font-size: 1rem;
color: #fff;
border-radius: .25rem;
border: 1px solid #2a80eb;
padding: .75rem 1rem;
background-color: #2a80eb;
box-sizing: border-box;
font-family: inherit;
cursor: pointer;
}El efecto es el siguiente:
Si desea ocultar el texto "No se seleccionó ningún archivo" detrás del botón, puede <input>configurarlo para el elemento actual font-size:0.
#file{font-size: 0;}El efecto es el siguiente:
