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.
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">×</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
