Dispongo de un input file en el siguiente formulario :
<form action="" method="POST" enctype="multipart/form-data" name="AddProjectos" id="AddProjectos" runat="server" class="form">
<fieldset>
<label for="file">Attach file <span style="color: #F70D11"> *</span></label>
<div class="inputfile">
<input type="file" name="archivo" id="archivo" accept=".csv" required>
<i class="fas fa-file-csv fa-2x"></i>
<span class="input-value" id="span"><?php if (empty($archivo)){echo "Browse File";} ?></span>
</div>
<div class="botones">
<input name="submit" type="submit" value="Submit">
<input type="reset" value="Reset" id="mcontrol">
</div>
</fieldset>
</form>
tal que así:
el código css es el siguiente:
.inputfile{
height: 43px;
margin-bottom: 25px;
width: 60%;
float: left;
box-sizing: border-box;
white-space: nowrap;
}
.inputfile > input[type="file"]{
float:left;
width:100%;
height: 100%;
margin:0px;
padding: 0;
cursor: pointer;
position: relative;
z-index:4;
opacity: 0;
}
.inputfile > span{
position:absolute;
font-size: 15px;
display: flex;
align-items: center;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
text-overflow: ellipsis;
white-space: nowrap;
height: 43px;
width: 48.5%;
border-radius: 5px;
border:1px solid #C6C6C6;
padding-left: 5px;
}
¿Cómo puedo agregar un borde rojo al div con class="inputfile" cuando se hace submit y no se ha elegido ningún archivo, es decir, cuando el input[file] es invalid? Pero no se puede hacer input[file]:invalid porque el div está por encima tapando el input.
EDICION:
Gracias a la respuesta he modificado los estilos css y en vez de que el div con clase inputfile tenga el estilo del input, he puesto el span como si fuera el input y aplicando la siguiente regla
.form input:focus:invalid, .form input:focus:invalid + #span {
border: solid 1px red;
}
ya funciona. Muchas gracias por la respuesta.