0

Le quité el efecto que hace el navegador al entrar o seleccionar un input, pero ahora tengo problemas con los tipo checkbox, desaparece cuando lo selecciono, he intentando varias cosas pero no consigo que se quede.

Agradezco la ayuda

body{
    background-image: url('http://gnosticwisdom.net/wp-content/uploads/2016/05/stairs-735995-1140x641.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
}

.logContainer{
    background-color:transparent;
    min-width: 100%;
    min-height: 250px;
    border: 1px solid#b3b3b3;
    border-radius: 3px;
    padding: 5%;
    color: #eaeaea;
}

.logContainer input{
    min-width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #eaeaea;
    color: #eaeaea;
}

.logContainer input[type="button"]{
    min-width: 100%;
    background-color: #000;
    border: 1px solid #fff;
    color: #fff;
}


#session, #session:hover, #session:active, #session:focus{
    min-width: 0px !important;
    outline: inherit;
}
<div class="container">
  <div class="row">
      <div class="col-md-4 offset-md-4">
          <div class="mt-3 logContainer">
              <label for="user">Usuario o correo electrónico</label><br>
              <input type="text" id="user"><br>
              <label for="pwd">Contraseña</label><br>
              <input type="password" id="pwd"><br>
              <input type="checkbox" id="session"/><label for="session">Recordar sesión</label><br><br><br>
              <input type="button" value="Entrar" class="btn btn-block btn-sm" id="enter"><br>
          </div>
      </div>
  </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

1 respuesta 1

1

El problema surge cuando le quitas la apariencia a todos los input

input:hover, 
{
    outline:0px !important;
    -webkit-appearance:none;
}

Para recuperarlo en los checkbox, le agregamos el default:

input[type="checkbox"]{
  -webkit-appearance:checkbox;
}

Opcionalmente tendrás que definirle una apariencia =)

body{
    background-image: url('http://gnosticwisdom.net/wp-content/uploads/2016/05/stairs-735995-1140x641.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
}
.logContainer{
    background-color:transparent;
    min-width: 100%;
    min-height: 250px;
    border: 1px solid#b3b3b3;
    border-radius: 3px;
    padding: 5%;
    color: #eaeaea;
}

.logContainer input{
    min-width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #eaeaea;
    color: #eaeaea;
}

.logContainer input[type="button"]{
    min-width: 100%;
    background-color: #000;
    border: 1px solid #fff;
    color: #fff;
}


#session, #session:hover, #session:active, #session:focus{
    min-width: 0px !important;
    outline: inherit;
}

input[type="checkbox"]{
-webkit-appearance:checkbox;
}
<div class="container">
  <div class="row">
      <div class="col-md-4 offset-md-4">
          <div class="mt-3 logContainer">
              <label for="user">Usuario o correo electrónico</label><br>
              <input type="text" id="user"><br>
              <label for="pwd">Contraseña</label><br>
              <input type="password" id="pwd"><br>
              <input type="checkbox" id="session"/><label for="session">Recordar sesión</label><br><br><br>
              <input type="button" value="Entrar" class="btn btn-block btn-sm" id="enter"><br>
          </div>
      </div>
  </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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.