entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Superposición de checkbox en label

Estoy haciendo un formulario que contenga checkboxes personalizados. El caso es que los que vienen por defecto me funcionan bien, pero cuando les pongo el css, se superponen entre la etiqueta y la cajita.
enter image description here
Supuestamente el código que he puesto está bien, ya que lo pongo en un editor online y funciona como quiero, que es que estén alineados y con la etiqueta al lado de la checkbox, pero cuando introduzco ese código que supuestamente funciona, me sale como en la imagen anterior.
Tengo que tener algo mal, eso lo sé, pero no sé ni el qué ni dónde.

INDEX

<!DOCTYPE html>
<html>
    <head>
        <title>Formulario</title>
        <link rel="stylesheet" type="text/css" href="estilo.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="form">
            <form method="POST" id="formulario" name="formulario" role="form">
                <p>Nombre</p>
                <label for="nombre">Su nombre</label>
                <br><br>
                <input type="text" name="nombre" placeholder="Nombre" required>

                <p>Correo</p>
                <label for="correo">Direccion De Correo</label>
                <br><br>
                <input type="email" name="correo" placeholder="[email protected]" required>

                <p>Elige</p>
                <label class="container">
                    <input type="checkbox" name="check1" value="Check1">Uno <br>
                    <span class="checkmark"></span>
                </label>
                <label class="container">Dos
                    <input type="checkbox" name="check2" value="Check2"> <br>
                    <span class="checkmark"></span>
                </label>
                <label class="container">Tres
                    <input type="checkbox" name="check3" value="Check3"> <br>
                    <span class="checkmark"></span>
                </label>

                <p>Mensaje</p>
                <label for="mensaje">Su Mensaje</label>
                <br><br>
                <textarea name="mensaje" placeholder="Mensaje" required></textarea>
                <br><br>

                <button id="myBtn" class="button" input type="submit" value="Enviar">Enviar</button>

            </form>
        </div>

        <!-- The Modal -->
        <div id="myModal" class="modal">
          <div class="modal-content">
            <span class="close">&times;</span>
            <p id="resultado"> Tus datos han sido guardados correctamente.</p>
          </div>
        </div>
        <script>
            $('#formulario').submit(function(event) {
            // Obtenemos todos los datos
                var parametros = $(this).serialize();
                $.ajax({
            // Lo enviamos mediante POST
                type: "POST",
            // A la URL
                url: "guardar.php",
            // Le pasamos los datos del formulario
                data: parametros,
                success: function(data) {
        // Abrimos el modal
                $("#myModal").modal("show");
            // Mostramos el resultado de la URL
                $('#resultado').html(data);
            // Reseteamos el formulario
                document.getElementById("formulario").reset();
            }
            });
        // Prevenimos que el botón submit recargue la página
            event.preventDefault();
        });
    </script>
</body>
</html>

CSS

.form{
    position:relative;
    width:500px;
    height:600px;
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 47%;
    background-color:#EC2F2F;
    border-radius: 20px;
    margin:auto;
}

input[type=text],[type=email]{
    width:470px;
    height:35px;
    font: 14px normal normal uppercase arial;
}

textarea{
    width: 470px;
    height: 110px;
    font: 14px normal normal uppercase arial;
    resize: none;
}

input[type=submit]{
    position:relative;
    width:150px;
    height:40px;
    border-radius:20px;
    margin-left: 150px;
    border:0px;
    background-color:#FFFFFF;
    font: 14px black normal normal uppercase arial;
}

p{
    font:24px arial;
}

label{
    display: inline-block;
    padding-left: 15px;
    text-indent: -15px; 
    margin:11px 20px 0 0;
    font:16px arial;
    color:#FFF;
    text-transform: uppercase;
}

/* The container */
.container {
  display: inline-block;
  position: relative;
  padding-left: 50px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: inline-block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.button{
  padding: 5px 15px;
  font-size: 20px;
  text-align: center;
  margin-left: 350px;
  cursor: pointer;
  outline: none;
  color: #000;
  background-color: #FFF;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.logytel{
  float: right;
  margin-top: -15px;
  margin-bottom: 10px;
  margin-right: 1%;
  width:200px;
  height:81px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #ff0000;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

GUARDAR.PHP

<?php
    //conectamos Con el servidor
    $host="localhost";
    $user="root";
    $pass="";
    $db="prueba";

    $con = mysqli_connect($host,$user,$pass,$db) or die ("Problemas al conectar");
    mysqli_select_db($con,$db) or die ("Problemas al conectar con la base de datos");

    //recuperar las variables
    $nombre=$_POST['nombre'];
    $correo=$_POST['correo'];
    $mensaje=$_POST['mensaje'];
    $check1=$_POST['check1'];
    $check2=$_POST['check2'];
    $check3=$_POST['check3'];

    //Hacer secuencia sql
    $sql="INSERT INTO datos (nombre, correo, mensaje, check1, check2, check3) VALUES ('{$nombre}','{$correo}','{$mensaje}','{$check1}','{$check2}','{$check3}')";

    //ejecutamos la sentencia de sql
    $ejecutar=mysqli_query($con,$sql);

    //verificamos la ejecucion
    if($ejecutar){

        echo"Datos Guardados Correctamente<br><a href='index.html'>Volver</a>";

    }else{

        echo "Hubo Algun Error";

    }
?>

MOSTRAR.PHP

<?php 

    //hacemos la conexion para la base de datos:
    $con= mysqli_connect('localhost','root','');

    //verificamos la conexion
    if(!$con){

        echo"No Se Encontro El Servidor";

    }else{

        $db= mysqli_select_db('prueba'); //nombre bbdd
    //verificamos la base de datos
        if(!$db){

            echo"No Se Encontro La Base De Datos";

        }
    }
    //Se Hace la sentencia sql:
    $sql="SELECT * FROM datos"; //nombre tabla

    //ejecutamos la sentencia de slq:
    $ejecutar=mysqli_query($sql);

    //traemos todos los valores en un array:
    $datos=mysqli_fetch_array($ejecutar);

    //imprimimos los datos de manera dinamica
    echo "<table border='1'>";
    echo"<tr>";
    echo "<th align='center'><b>Nombre</th>";
    echo "<th align='center'><b>Correo</th>";
    echo "<th align='center'><b>Elige</th>";
    echo "<th align='center'><b>Mensaje</th>";
    echo"</tr>";
    for($i=0; $i<$datos; $i++){
        echo"<tr><td>$datos[0]</td>";
        echo"<td>$datos[1]</td>";
        echo"<td>$datos[2]</td>";
        echo"</tr>";
        $datos=mysqli_fetch_array($ejecutar);
    }
    echo"</table>";
?>

Preferiblemente, me gustaría evitar cualquier bootstrap o cosas así ya que no lo controlo. Si puede ser únicamente con el html y el css, mejor que mejor. Muchas gracias

3votos

Peter comentado

Con el código que compartes no pasa ese problema. Crea un HTML nuevo sólo con ese código y el resultado es otro. Hay algo más en tu HTML o cosas extras que no estas compartiendo.

Edita tu pregunta con todo el código para ver en dónde esta el problema y si puedes también comparte la URL para ver en vivo el error.

Saludos.

1voto

Lilii comentado

¡He visto el problema! Pero no sé cómo solucionarlo. Como verás en el código, uso un modal, pues son esos scripts los que dan fallos a la hora de personalizar el checkbox. No sé muy bien porqué, pero los borré y funcionaba a la perfección. Y necesito usar ese modal, pero que sea compatible con el checkbox

1voto

Peter comentado

Una vez más con el código nuevo, crea un HTML nuevo, pega el HTML y CSS. El resultado es otro.

Comparte un enlace a la página en cuestión para poder inspeccionar el código.

1voto

Lilii comentado

1 Respuesta

2votos

Peter Puntos150460

En la linea 50 de tu CSS tienes esto:

.container {
    display: inline-block;
    position: relative;
    padding-left: 50px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Cambialo por:

.container {
    display: inline-block;
    position: relative;
    padding-left: 50px!important;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Notese el !important en tu padding. Ese esta siendo sobre escrito por los estilos de Bootstrap.

Para que esto no pase tienes que poner en tu cabecera la referencia a tu CSS abajo de las de Bootstrap.

Saludos.

2votos

Lilii comentado

¡Muchas gracias, Peter! Ya lo tengo solucionado :D

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta