Label de boton se sobrepone al mismo HTML y CSS

Question

Comencé hace poco a hacer front-end y estoy desarrollando el login que se puede apreciar en el snippet.
Mi problema es que el botón redondo para recordar el login se me sobrepone junto al label del mismo.

body, html {
  margin:0;
  font-family:Arial;
}

.loginForm {
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
  position:absolute;
}

input,button {
  outline:none;
  padding:10px;
  border:1px solid #c6c6c6c1;
}

.center {
    width: 10%;
    height: 10%;
    size: 20%;
}

.roundedCheckbox {
    position: relative;
    margin-bottom: 2%;
}

.roundedCheckbox label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: #f5f5f5 40%;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    font-family: Bahnschrift;
    font-weight: 600;
    font-size: 0.55rem;
    color: #00C9FF;
}

.roundedCheckbox label:after {
    content: '';
    width: 9px;
    height: 5px;
    position: absolute;
    top: 5px;
    left: 4px;
    border: 3px solid rgb(8, 250, 0);
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    transform: rotate(-45deg);
}

.roundedCheckbox label:hover::after {
    opacity: 0.3;
}

.roundedCheckbox input[type=checkbox] {
    visibility: hidden;
}

.roundedCheckbox input[type=checkbox]:checked+label:after {
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Techcoy Log in</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="icon" href="./img/Logo.ico">
</head>
<body>
    <!-- Formulario Log-in -->
    <div class="loginForm">
    <form action="" method="get" autocomplete="off">
        <h3>Iniciar Sesión</h3>
        <p><input type="email" name="username" class="inputAlign1" placeholder="Email"></p>
        <p><input type="password" name="password" class="inputAlign2" placeholder="Password"></p>
      <div class="roundedCheckbox">
       <input type="checkbox" value="None" id="roundedCheckbox" name="check" unchecked /><label for="roundedCheckbox">RECORDARME</label>
      </div>
        <input type="submit" class="btn btn-LogIn" value="Ingresar">
      </form>
    </div>
 
</body>
</html>

css html

Roimer · Answer

El problema puntual es que la etiqueta tiene un ancho fijo de 20px, y el texto que está dentro de ella está alineado a la izquierda, por eso las primeras letras de la etiqueta quedan montadas en el fondo circular.
La solución a eso sería indentar el texto dentro de la etiqueta, pero no usando padding (cambiaría el ancho de la etiqueta), sino con text-indent:
.roundedCheckbox label {
    width: 20px;
    height: 20px; 
    text-indent: 28px; /* -> mueve el texto a la derecha */
    line-height: 20px; /* -> para la alineación vertical */
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: #f5f5f5 40%;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    font-family: Bahnschrift;
    font-weight: 600;
    font-size: 0.55rem;
    color: #00C9FF;
}

Soporte: text-indent tiene soporte básico en todos los navegadores principales, incluso desde IE6 (https://caniuse.com/css-text-indent). Tiene otras características avanzadas, pero casi ningún navegador las soporta todavía, de todas formas este ejemplo debe funcionar en cualquier navegador actual.

Label de boton se sobrepone al mismo HTML y CSS

One Answer

Add your own answers!

Ask a Question