0

Estoy intentando replicar un input similar a los de materialize. Entonces el problema es el siguiente...

Tengo un input y un label, ambos con la misma clase, lo que quiero es (con CSS) saber que cuando el input NO ESTE VACIO entonces seleccionar el siguiente elemento hermano con la misma clase y poder asignarle atributos. Pero no logro hacerlo...

body{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
form{
width: 350px;
padding: 10px;
}
.content-input{
    height: 50px;
    display: flex;
    position: relative;
}
.content-input label{
    position: absolute;
    bottom: 7px;
    left: 2px;
    z-index: 1;
}
.content-input input{
    height: 30px;
    padding: 0px 5px 2px 5px;
    position: absolute;
    z-index: 2;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(138, 38, 38, 0.371);
    border: none;
    outline: none;
    transition: .4s;
    border-bottom: 1px solid blue;
}
.content-input input:focus-visible{
    padding: 5px;
    box-shadow: inset 0 -1px 0  #08B;
    transition: box-shadow 0.5s;
}
.content-input input:focus-visible{
    padding: 5px;
    box-shadow: inset 0 -1px 0  #08B;
    transition: box-shadow 0.5s;
}

/*Se supone que con esta linea lograria eso, pero simplemente no funciona*/
.cardinal-input[value]:not(:empty) + .cardinal-input{
    font-size: 100px;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Materialize</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="">
        <div class="content-input">
            <input type="text" class="cardinal-input" value="34"> 
            <label for="textInput" class="cardinal-input">Prueba</label>
        </div>
    </form>
    <!-- <script src="main.js"></script> -->
</body>
</html>

2 respuestas 2

0

Puedes usar el placeholder-shown, básicamente para que cuando no se muestre el placeholder es porque el input esta lleno. De esta forma validas que tenga datos y modificas conforme necesites. Cabe mencionar que necesitar poner el atributo placeholder en tu input para que funcione.

body{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
form{
width: 350px;
padding: 10px;
}
.content-input{
    height: 50px;
    display: flex;
    position: relative;
}
.content-input label{
    position: absolute;
    bottom: 7px;
    left: 2px;
    z-index: 1;
}
.content-input input{
    height: 30px;
    padding: 0px 5px 2px 5px;
    position: absolute;
    z-index: 2;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(138, 38, 38, 0.371);
    border: none;
    outline: none;
    transition: .4s;
    border-bottom: 1px solid blue;
}
.content-input input:focus-visible{
    padding: 5px;
    box-shadow: inset 0 -1px 0  #08B;
    transition: box-shadow 0.5s;
}
.content-input input:focus-visible{
    padding: 5px;
    box-shadow: inset 0 -1px 0  #08B;
    transition: box-shadow 0.5s;
}


/*Se supone que con esta linea lograria eso, pero simplemente no funciona*/
.cardinal-input:not(:placeholder-shown) + .cardinal-input{
    font-size: 100px;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Materialize</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="">
        <div class="content-input">
            <input type="text" placeholder="" class="cardinal-input" value=""> 
            <label for="textInput" class="cardinal-input">Prueba</label>
        </div>
    </form>
    <!-- <script src="main.js"></script> -->
</body>
</html>

0

Puedes agregar el atributo required al input, luego en tu selector hacer lo siguiente

body{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
form{
width: 350px;
padding: 10px;
}
.content-input{
    height: 50px;
    display: flex;
    position: relative;
}
.content-input label{
    position: absolute;
    bottom: 7px;
    left: 2px;
    z-index: 1;
}
.content-input input{
    height: 30px;
    padding: 0px 5px 2px 5px;
    position: absolute;
    z-index: 2;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(138, 38, 38, 0.371);
    border: none;
    outline: none;
    transition: .4s;
    border-bottom: 1px solid blue;
}
.content-input input:focus-visible{
    padding: 5px;
    box-shadow: inset 0 -1px 0  #08B;
    transition: box-shadow 0.5s;
}
.content-input input:focus-visible{
    padding: 5px;
    box-shadow: inset 0 -1px 0  #08B;
    transition: box-shadow 0.5s;
}
.cardinal-input:not(:invalid) + .cardinal-input {
  font-size: 100px;
}

Y tu HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Materialize</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="">
        <div class="content-input">
            <input type="text" class="cardinal-input" value="34" required> 
            <label for="textInput" class="cardinal-input">Prueba</label>
        </div>
    </form>
    <!-- <script src="main.js"></script> -->
</body>
</html>

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.