input checkbox disappears

Question

input checkbox disappears

Navigation

#1 by (1 votes)

0

I removed the effect that the browser does when entering or selecting an input, but now I have problems with the checkbox type, it disappears when I select it, I have tried several things but I can not get it to stay.

I appreciate the help

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>

html css

asked by Alberto Siurob 30.06.2018 в 21:12

source

1 answer

Interpret html tags in a php or twig string call files from the same module

score 1 · Accepted Answer

The problem arises when you remove the appearance to all input

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

To recover it in the checkboxes, we add the default:

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

Optionally you will have to define an appearance =)

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>