2

No consigo averiguar como modificar el texto que viene como acompañamiento a mi checkbox, ya que de repente aparece enorme y por mucho que trate de modificar usando classes y dandole un font-size normal, no cambia, cuando el resto no ha tenido ninguna anomalia a la hora de migrarlo.

Como luce en comparacion al resto: introducir la descripción de la imagen aquí

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const direccion = document.getElementById('direccion');
const telefono = document.getElementById('telefono');

form.addEventListener('submit', e => {
    e.preventDefault();

    checkInputs();
});

function checkInputs() {
    var usernameValue = username.value.trim();
    var emailValue = email.value.trim();
    var direccionValue = direccion.value.trim();
    var telefonoValue = telefono.value.trim();

    if(usernameValue === '') {
        setErrorFor(username, 'Introduzca un nombre, por favor');
    } else {
        setSuccessFor(username);
    }

    if(emailValue === '') {
        setErrorFor(email, 'Introduzca un email, por favor');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'El email introducido no es valido, intentelo de nuevo');
    } else {
        setSuccessFor(email);
    }

    if(direccionValue === '') {
        setErrorFor(direccion, 'Introduzca una direccion, por favor');
    } else {
        setSuccessFor(direccion);
    }

    if(telefonoValue === '') {
        setErrorFor(telefono, 'Introduzca un telefono, por favor');
    } else if(telefono.value.length !== 9) {
        setErrorFor(telefono, 'Su numero no tiene la longitud adecuada');
    } else{
        setSuccessFor(telefono);
    }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'form-control error';
    small.innerText = message;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.segmento').forEach(section => {
  ScrollTrigger.create({
    trigger: section,
    start: 'top top',
    pin: true,
    pinSpacing: false
  });
});
html {
    scroll-behavior: smooth;
}

.navbar-nav>li {
    padding-left: 20px;
    padding-right: 20px;
}

nav {
    background-color: #000033;
    opacity: 0.95;
}

.cookie-container {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: #2f3640;
    color: #f5f6fa;
    padding: 15px 32px;
    box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.151);
    transition: 400ms;
}

.cookie-container a {
    color: #f5f6fa;
}

.cookie-container.active {
    bottom: 0;
}

.cookie-btn {
    background: #e84118;
    border: 0;
    color: #f5f6fa;
    padding: 12px 48px;
    font-size: 18px;
    margin-bottom: 16px;
    border-radius: 8px;
    cursor: pointer;
}

.column-right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.column-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #000;
    padding: 0rem 2rem;
}

.column-left h1 {
    margin-bottom: 3rem;
    font-size: 2rem;
    font-style: italic;
}

.column-left p {
    margin-bottom: 2rem;
    font-size: 2rem;
    line-height: 1.1;
}
.column-normal{

  vertical-align: middle;
  text-align: center;
  font-size:3rem;
}
.column-normal p{
  margin-bottom: 2rem;
  font-size: 4rem;
  line-height: 4;
}
.column-normal .image{
  width: 100%;
  height: 100%;
  max-width: 750px;
  max-height:400px;
}
.container{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.segmento {
    background: #EC96D3;
}
.cuatro {
  background: #66488f;
  height: 50vh;
}
.for{
  height: 400vh;
}
section{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  position:static;
  display:flex;
  justify-content: center;
  align-items: center;

}
body{
  overflow-x: hidden;
}
section .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  height:95vh;
  padding: 3rem calc((100vw - 1300px)/2);
}
section .containersp{
  display: block;
  padding: 3rem calc((100vw - 1300px)/2);
  height:50vh;
}

section .containerGAL{
  padding: 3rem calc((100vw - 1300px)/2);

}
.gallery-container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 300px);
  width: 80%;
  margin: 100px auto;

}
.gallery-container .gallery-card{
  overflow: hidden;
}
.gallery-container .gallery-card a > img{
  width:100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
.gallery-container .gallery-card a{
  width:100%;
  height: 100%;
}
.gallery-container .gallery-card a > img:hover{
  transform: scale(1.5);
}
section .containerimg{
  display: block;
  padding: 3rem calc((100vw - 1300px)/2);
  height:60vh;
}
section .text {
  color:#fff;
}
section .image{
  width: 100%;
  height: 100%;
  max-width: 750px;
  max-height:400px;
}

footer {
    margin: 0;
    bottom: 0;
    position: sticky;
    box-sizing: border-box;
    display: flex;
    color: #fff;
    background: #000033;
    padding: 50px;
    font-size: 14px;
    flex-flow: row wrap;

}

.footer-left img {
    width: 50%;
    max-width: 150px;
    max-height: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.socials {
    text-align: center;
}

.footer>* {
    flex: 1 100%;
}

.footer-left {
    margin-right: 1.25em;
    margin-bottom: 2em;
}

.footer-right {
    display: flex;
    flex-flow: row wrap;
}

.footer-right>* {
    flex: 1 50%;
    margin-right: 1.25em;
}

.box a {
    color: #999;
}

.footer-bottom {
    text-align: center;
    color: #999;
    padding-top: 50px;
}

.footer-left p {
    padding-right: 20%;
    color: #999;
}

.socials a {
    background: #364a62;
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-right: 10px;
    padding: 10px;
}

@media screen and (min-width: 600px) {
    .footer-right>* {
        flex: 1;
    }
    .footer-left {
        flex: 1 0px;
    }
    .footer-right {
        flex: 2 0px;
    }
}

@media (max-width: 600px) {
    .footer {
        padding: 15px;
    }
}

.btninicio {
    position: fixed;
    width: 50px;
    height: 50px;
    background: #6F1E51;
    bottom: 40px;
    right: 50px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 22px;
}

.footer h2 {
    font-weight: 600;
    font-size: 17px;
}

.footer ul {
    list-style: none;
    padding-left: 0;
}

.footer li {
    line-height: 2em;
}

.footer a {
    text-decoration: none;
}
button{
  cursor: pointer;
}
section .containerfrm{
  padding: 3rem calc((100vw - 1300px)/2);
  height: 150vh;


}
.form {
    padding: 30px 40px;
}

.form-control {
    margin-bottom: 10px;
    padding-bottom: 20px;
    position: relative;
}

.form-control label {
    display: inline-block;
    margin-bottom: 5px;
}

.form-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-family: inherit;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.form-control input:focus {
    outline: 0;
    border-color: #777;
}

.form-control.success input {
    border-color: #2ecc71;
}

.form-control.error input {
    border-color: #e74c3c;
}

.form-control i {
    visibility: hidden;
    position: absolute;
    top: 40px;
    right: 10px;
}

.form-control.success i.fa-check-circle {
    color: #2ecc71;
    visibility: visible;
}

.form-control.error i.fa-exclamation-circle {
    color: #e74c3c;
    visibility: visible;
}

.form-control small {
    color: #e74c3c;
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
}

.form-control.error small {
    visibility: visible;
}

.form button {
    background-color: #051261;
    border: 2px solid #051261;
    border-radius: 4px;
    color: #fff;
    display: block;
    font-family: inherit;
    font-size: 16px;
    padding: 10px;
    margin-top: 20px;
    width: 100%;
}

@media screen and (max-width: 480px) {

    .social-panel-container.visible {
        transform: translateX(0px);
    }

    .floating-btn {
        right: 10px;
    }
}
<!doctype html>
<html lang="es">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="contact.css">
    <link rel="stylesheet" href="lightbox.min.css">
    <title>Contacto</title>
    <link rel="shortcut icon" href="log.png" />
    <style>
    section .containerfrm{
      display: block;
      padding: 3rem calc((100vw - 1300px)/2);
      height: 150vh;

      background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        width: 1000px;
        max-width: 100%;
    }
    .form {
        padding: 30px 40px;
    }

    .form input{
      font-size: 10px;
    }

    .form-control {
        margin-bottom: 10px;
        padding-bottom: 20px;
        position: relative;
    }

    .form-control label {
        display: inline-block;
        margin-bottom: 5px;
    }

    .form-control input {
        border: 2px solid #f0f0f0;
        border-radius: 4px;
        display: block;
        font-family: inherit;
        font-size: 14px;
        padding: 10px;
        width: 100%;
    }

    .form-control input:focus {
        outline: 0;
        border-color: #777;
    }

    .form-control.success input {
        border-color: #2ecc71;
    }

    .form-control.error input {
        border-color: #e74c3c;
    }
    .check {
      font-size: 12px;
    }
    .form-control i {
        visibility: hidden;
        position: absolute;
        top: 40px;
        right: 10px;
    }

    .form-control.success i.fa-check-circle {
        color: #2ecc71;
        visibility: visible;
    }

    .form-control.error i.fa-exclamation-circle {
        color: #e74c3c;
        visibility: visible;
    }

    .form-control small {
        color: #e74c3c;
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.error small {
        visibility: visible;
    }

    .form button {
        background-color: #051261;
        border: 2px solid #051261;
        border-radius: 4px;
        color: #fff;
        display: block;
      cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        padding: 10px;
        margin-top: 20px;
        width: 100%;
    }

    @media screen and (max-width: 480px) {

        .social-panel-container.visible {
            transform: translateX(0px);
        }

        .floating-btn {
            right: 10px;
        }
    }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark  sticky-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">SneakerReport</a>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="ini.html"> <i class="fa fa-home"></i> Inicio <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="histo.html"> <i class="fa fa-book"></i> Historia</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-user"></i> Contacto</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-certificate"></i>
                        Marcas
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="sup.html">Supreme <i class="fa fa-exclamation"></i></a>
                        <a class="dropdown-item" href="pal.html">Palace <i class="fa fa-exclamation"></i></a>
                    </div>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <section class="segmento">
      <div class = "containersp">
        <div class="column-normal">
            <p class="text animate__animated animate__heartBeat animate_slow animate__infinite">¿Necesitas mas información?</p>
        </div>
      </div>
    </section>

    <section class="segmento dos">
      <div class = "container">
        <div class="column-right">
          <img src="me.jpg" alt="Levv" class="image" />
        </div>
        <div class="column-left">
          <h1 class="text">
            Bienvenido
          </h1>
            <p class="text">¡Buenas! Soy Gonzalo Canteli y un dia como hoy en septiembre del 2018 empecé ademas de mis estudios informáticos, a interesarme por la moda
              y la cultura alrededor de ella. Este proyecto es una demostración de algo grande que quiero llevar a cabo.¡Espero que te guste!

            </p>
        </div>
      </div>
    </section>
    <section class="segmento dos">
      <div class = "container">
        <div class="column-left">
            <p class="text">Si lo desea, puede comunicarse con nosotros a traves de nuestro <a href="#" style="color:pink"onclick="JavaScript:window.location='mailto:'+'gon73li'+'@'+'gmail'+'.com'" > email</a>

            </p>
        </div>
        <div class="column-right">
          <p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3040.6082074751016!2d-3.678305028399778!3d40.35103652134233!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4226bdd9ea0d85%3A0xafc17f8fcff53d6!2sCentro%20Cultural%20los%20Rosales!5e0!3m2!1ses!2ses!4v1609434348458!5m2!1ses!2ses" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></p>
        </div>
      </div>
    </section>
    <section class="segmento for">
      <div class = "containerfrm">
        <div class="column-normal">
          <form id="form" class="form">
                <div class="form-control">
                    <label for="username">Nombre y Apellidos</label>
                    <input type="text" placeholder="P ej: Juan Perez" id="username" />
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error</small>
                </div>
                <div class="form-control">
                    <label for="username">Email</label>
                    <input type="email" placeholder="juan@perez.com" id="email" />
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error</small>
                </div>
                <div class="form-control">
                    <label for="username">Direccion</label>
                    <input type="text" placeholder="Avenida de Andalucia 4" id="direccion"/>
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error</small>
                </div>
                <div class="form-control">
                    <label for="username">Telefono</label>
                    <input type="tel" placeholder="643936483" id="telefono"/>
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error</small>
                </div>
            <input name="aceptacion" type="checkbox" class="check"/>
            Acepto el uso de mi informacion con fines informativos
            <br />

                <button style="cursor:pointer">Enviar</button>
            <button id="boton" style="cursor:pointer">Reiniciar</button>
            </form>


        </div>
      </div>
    </section>
    <footer class="footer segmento cuatro" style="bottom:0">
        <div class="footer-left">
            <img src="yzy.png" alt="snk">
            <p>SneakerReport nace como una solucion para que gente de todas las edades tenga una posibilidad
                de acceder a moda limitada sin pagar reventa.</p>
            <div class="socials">
                <a href="https://www.facebook.com/profile.php?id=100011277759449" target="_blank"><i class=" fab fa-facebook"></i> </a>
                <a href="https://twitter.com/Gonzaacdz" target="_blank"><i class=" fab fa-twitter"></i> </a>
                <a href="https://www.instagram.com/gx.neee/?hl=es" target="_blank"><i class=" fab fa-instagram"></i> </a>
            </div>
        </div>
        <ul class="footer-right">
            <li>
                <h2>Paginas en las que tenemos soporte</h2>
                <ul class="box">
                    <li><a href="sup.html"> Supreme </a></li>
                    <li><a href="#"> Palace </a></li>
                </ul>
            </li>
            <li>
                <h2>Otras secciones</h2>
                <ul class="box">
                    <li><a href="histo.html"> Historia </a></li>
                    <li><a href="#"> Inscribete </a></li>
                </ul>
            </li>
            <li>
                <h2>Direccion</h2>
                <ul class="box">
                    <li>  </li>
                    <li> Piso 1º Puerta B </li>
                    <li> Madrid, ES, 28021 </li>
                </ul>
            </li>
        </ul>
        <div class="footer-bottom">
            <p>Todos los derechos reservados a &copy;Gonzalo Canteli 2020 </p>
        </div>
    </footer>
    <a class="btninicio" href="#"> <i class=" fas fa-angle-double-up"></i> </a>
    <div class="cookie-container">
        <p>Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si continúas navegando aceptas su uso. <a href="#">Política de cookies. </a></p>
        <button class="cookie-btn">
            De acuerdo
        </button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>

    <script src="cookieplugin.js"></script>
    <script src="lightbox-plus-jquery.min.js"></script>
    <script src="lightbox.min.js"></script>
    <script type ="text/javascript" src="contact.js"></script>
    <script type="text/javascript">
    document.getElementById("boton").onclick=clear;
    function clear(){
      var i;
        for (i = 0; (i < document.forms.length); i++) {
          document.forms[i].reset();
        }
    }
    </script>
</body>

</html>

1 respuesta 1

2

Lo primero que noto aquí:

<input name="aceptacion" type="checkbox" class="check"/>
Acepto el uso de mi informacion con fines informativos

Es que:

  • El texto que acompaña al input no esta contenido dentro de ninguna etiqueta HTML, mas allá de pertenecer como un elemento mas del formulario
  • La clase que le defines al input afectará solamente a este mismo y no al texto en si
  • Ya que están vinculados el input con el texto, entonces como notas en este enlace de la MDN haremos lo siguiente:
    • Declaramos una etiqueta label
    • Dentro de la etiqueta anterior contenemos entonces al input seguido del texto
    • La clase que le des al label ahora si se capaz de afectar las propiedades del texto

Ejemplo 1

Este primer ejemplo no logrará modificar el tamaño de la fuente:

    <style>
      #unId {
        font-size: 50px;
      }
    </style>
    <input type="checkbox" id="unId">Hola

Ejemplo 2

En este ejemplo el texto si verá incrementado su tamaño al estar contenido dentro de otra etiqueta

    <style>
      #unId {
        font-size: 50px;
      }
    </style>
    <label id="unId">
      <input type="checkbox" >Hola
    </label>

Siendo esta última la opción que te recomendaría implementes

1
  • Era exactamente lo que necesitaba! Muchisimas gracias!
    – Wazabi
    el 6 ene. 2021 a las 12:31

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.