0

Estoy intentando mover el label hacia arriba, como los formularios de google en css para un formulario, si hace su función de subir, cuando coloco mi cursor y escribo algo, sin embargo al momento de querer llenar otro campo el label se coloca en el mismo sitio que el imput y se sobre ponen, mi duda es como hacer para que se quede arriba...

En mi html si coloco el required anexo mis codigos html y css en la demostración

Tambien me gustaria saber si hay alguna opción para poder hacer que el select tambien se se suba el label o el option donde dice seleccione su opción, y si me pudieran explicar como hacerlo

Este es mi css:

    padding: 10x 0;
    margin-bottom: 30px;
}

.contact-form {
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    border: none;
    border-bottom: 2px solid #999;
}

.contact-form form div {
    position: relative;
}

.contact-form form div p label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #999;
    transition: .5s;
    pointer-events: none;
}

.contact-form input:focus~label,
.contact-form:valid~label {
    top: -12px;
    left: 0;
    color: red;
    font-size: 12px;
    font-weight: bold;
}

.contact-form input:focus,
.contact-form:valid {
    border-bottom: 2px solid red;
}


.contact-form input {
    padding: 10x 0;
    margin-bottom: 30px;
}

.contact-form {
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    border: none;
    border-bottom: 2px solid #999;
}

.contact-form form div {
    position: relative;
}

.contact-form form div p label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #999;
    transition: .5s;
    pointer-events: none;
}

.contact-form input:focus~label,
.contact-form:valid~label {
    top: -12px;
    left: 0;
    color: red;
    font-size: 12px;
    font-weight: bold;
}

.contact-form input:focus,
.contact-form:valid {
    border-bottom: 2px solid red;
}
<div class="contact-form">
                <h3>CAPTURA DE DATOS</h3>
                <h4>Por favor, llena los campos que a continuación se presentan. Estos datos aparecerán en tu certificado, se cuidadoso.</h4>
                <form id="formulario" name="formulario" action="insertarDatos.php" method="POST" class="formulario_usuarios">

                    <div class="form-group">
                        <p>
                            <input class="form-control" type="text" id="nombre" name="nombre" maxlength="30" required="">
                            <label class="form-label">Nombre(s)</label>
                        </p>
                    </div>

                    <div class="form-group">
                        <p>
                            <input class="form-control" type="text" id="apellido" name="apellido" maxlength="30" required="">
                            <label class="form-label">Apellidos</label>
                        </p>
                    </div>

                    <div class="form-group">
                        <p>
                            <input class="form-control" type="text" id="curp" name="curp" maxlength="18" required>
                            <label class="form-label">CURP (Solo ciudadanos mexicanos)</label>
                        </p>
                    </div>

                    <div class="form-group">
                        <p>
                            <input class="form-control" type="email" id="email" name="email" maxlength="50" required>
                            <label class="form-label">Correo electrónico</label>

                        </p>
                    </div>

                    <div class="form-group">
                        <p>
                            <select name="curso" id="curso" class="group">
                        <option value="ISO 9001:2015 Sistemas de gestión de la calidad.">ISO 9001:2015 Sistemas de gestión
                            de la calidad.</option>
                        <option value="ISO 14001:2015 Sistemas de gestión ambiental.">ISO 14001:2015 Sistemas de gestión
                            ambiental.</option>
                        <option value="ISO 45001:2018 Sistemas de gestión de la seguridad y salud en el trabajo.">ISO
                            45001:2018 Sistemas de gestión de la seguridad y salud en el trabajo.</option>
                        <option value="ISO 28000:2007 Sistemas de gestión para la seguridad de la cadena de suministro.">ISO
                            28000:2007 Sistemas de gestión para la seguridad de la cadena de suministro.</option>
                        <option value="ISO 37001:2016 Sistemas de gestión antisoborno.">ISO 37001:2016 Sistemas de gestión
                            antisoborno.</option>
                        <option value="ISO 39001:2012 Sistemas de gestión de la seguridad vial.">ISO 39001:2012 Sistemas de
                            gestión de la seguridad vial.</option>
                        <option value="ISO 31000:2018 Gestión del Riesgo - Directrices.">ISO 31000:2018 Gestión del Riesgo –
                            Directrices.</option>
                        <option value="ISO 21001:2018 Sistemas de gestión para organizaciones educativas.">ISO 21001:2018
                            Sistemas de gestión para organizaciones educativas.</option>
                        <option value="ISO 19011:2018 Directrices para la auditoría de los sistemas de gestión.">ISO
                            19011:2018 Directrices para la auditoría de los sistemas de gestión.</option>
                        <option value="Control Estadístico de Procesos con Minitab 19.">Control Estadístico de Procesos con
                            Minitab 19.</option>
                        <option value="Auditorias Remotas frente al Covid 19.">Auditorias Remotas frente al Covid 19.
                        </option>
                        <option value="Análisis de Ciclo de Vida.">Análisis de Ciclo de Vida.</option>
                    </select>
                            <label class="form-label" for="curso">Seleccionar curso</label>

                        </p>
                    </div>

                    <div class="boton">
                        <input type="submit" value="ENVIAR" id="btnSend" name="btnSend">
                    </div>
                </form>
1

1 respuesta 1

0

Puede que haya mejor forma de hacerlo, pero a mi me funciona asi:

Cambia esto:

*.contact-form input:focus~label,
.contact-form:valid~label {
    top: -12px;
    left: 0;
    color: red;
    font-size: 12px;
    font-weight: bold;
}

por:

.focus {
    top: -12px;
    left: 0;
    color: red;
    font-size: 12px;
    font-weight: bold;
}

carga jquery y agrega al final:

$(document).ready(function(){
    $("input").focus(function() {
        $(this).siblings().addClass("focus");
    });
    $("input").focusout(function() {
        if ($(this).val() <= 0) {
            $(this).siblings().removeClass("focus");
        }
    });
})

No colocaste el reset de tu css, verifica los padding o margin para ubicar los textos.

Aquí el código completo:

$(document).ready(function(){
    $("input").focus(function() {
        $(this).siblings().addClass("focus");
    });
    $("input").focusout(function() {
        if ($(this).val() <= 0) {
            $(this).siblings().removeClass("focus");
        }
    });
})
* {margin: 0; padding: 0; box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;}
.contact-form input {
    padding: 10x 0;
    margin-bottom: 30px;
}

.contact-form {
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    border: none;
    border-bottom: 2px solid #999;
}

.contact-form form div {
    position: relative;
}

.contact-form form div p label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #999;
    transition: .5s;
    pointer-events: none;
}

.focus {
    top: -12px;
    left: 0;
    color: red;
    font-size: 12px;
    font-weight: bold;
}

.contact-form input:focus,
.contact-form:valid {
    border-bottom: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact-form">
    <h3>CAPTURA DE DATOS</h3>
    <h4>Por favor, llena los campos que a continuación se presentan. Estos datos aparecerán en tu certificado, se cuidadoso.</h4>
    <form id="formulario" name="formulario" action="insertarDatos.php" method="POST" class="formulario_usuarios">

        <div class="form-group">
            <p>
                <input class="form-control" type="text" id="nombre" name="nombre" maxlength="30" required="">
                <label class="form-label">Nombre(s)</label>
            </p>
        </div>

        <div class="form-group">
            <p>
                <input class="form-control" type="text" id="apellido" name="apellido" maxlength="30" required="">
                <label class="form-label">Apellidos</label>
            </p>
        </div>

        <div class="form-group">
            <p>
                <input class="form-control" type="text" id="curp" name="curp" maxlength="18" required>
                <label class="form-label">CURP (Solo ciudadanos mexicanos)</label>
            </p>
        </div>

        <div class="form-group">
            <p>
                <input class="form-control" type="email" id="email" name="email" maxlength="50" required>
                <label class="form-label">Correo electrónico</label>
            </p>
        </div>
    </form>

</div>

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.