2

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">&nbsp;*</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í:

introducir la descripción de la imagen aquí

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.

introducir la descripción de la imagen aquí

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.

1
  • No te importaria el uso de JavaScript? el 5 jun. 2020 a las 17:22

1 respuesta 1

3

Puedes hacerlo de esta forma:

  • El input que esté posicionado como primer elemento
  • El div que aparezca como hermando directo del input
  • A ambos elementos les aplicamos un #id
  • Usamos el selector de hermanos adyacentes
  • Establecemos por medio de CSS una regla de este tipo:

Regla CSS:

#input:invalid + #div {

}

De modo entonces que la propiedad y valor de esta regla CSS afecte al div cuando la pseudoclase :invalid este afectando al input

Ejemplo

      <style>
        #numero:invalid + #afectado{
          border: 1px solid red;
        }
      </style>
    </head>
    <body>
    <input id="numero" type="number" />
    <div id="afectado">
      Hola
    </div>

EDICIÓN

Ejemplo reacomodando visualmente los elementos:

      <style>
        .contenedor {
          display: flex;
          flex-direction: column;
          width: 200px;
        }
        #afectado {
          order: -1;
        }
        #numero:invalid + #afectado{
          border: 1px solid red;
        }
      </style>
    </head>
    <body>
    <div class="contenedor">
      <input id="numero" type="number" />
      <div id="afectado">
        Hola
      </div>
    </div>

Referencias

5
  • Hola, Muchas gracias por la respuesta. El input está posicionado dentro del div. No entiendo cuando haces mención a "El input que esté posicionado como primer elemento" el 5 jun. 2020 a las 17:40
  • ahhh @RaúlGómez que para que la regla de selección funcione, el input debe estar primero antes del div
    – BetaM
    el 5 jun. 2020 a las 17:44
  • @RaúlGómez revisa la edición que hice por favor, el seguno ejemplo creo que si se apega a lo que buscas
    – BetaM
    el 5 jun. 2020 a las 17:49
  • Hola, lo que he hecho es modificar el aspecto del input file, con lo cual he puesto un div encima, por lo tanto no tiene sentido poner el input en primer lugar. Déjame que lo pruebe. el 5 jun. 2020 a las 17:51
  • @RaúlGómez si, en el segundo ejemplo pase el input a la parte de abajo
    – BetaM
    el 5 jun. 2020 a las 17:52

Tu Respuesta

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

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