Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="checkbox" id="checkbox1" class="hidden-checkbox">
<label for="checkbox1">1-комнатная</label>
  
<input type="checkbox" id="checkbox2" class="hidden-checkbox" checked="checked">
<label for="checkbox2">2-комнатная</label>
  
<input type="checkbox" id="checkbox3" class="hidden-checkbox">
<label for="checkbox3">3-комнатная</label>
</body>
</html>
 
label {
  line-height: 2em;
  margin: 0 0.5em;
  border: 1px solid rgba(0,0,0,0);
  color: rgba(0,0,0,.75);
  background-color: rgba(241,241,241,0.25);
  padding: 0.3em 0.5em;
  border-radius: 5px;
  transition: all .25s linear 0s;
  cursor: pointer;
  position: relative;
}
​
.hidden-checkbox {
  display: none;
  position: relative;
}
​
.hidden-checkbox:checked + label {
  border: 1px solid rgba(0,0,0,1);
  color: rgba(0,0,0,1);
  background-color: rgba(241,241,241,1);
  pointer-events: none;
  position: relative;
}
​
.hidden-checkbox + label:after {
  width: 0;
  left: -1em;
  position: relative;
  opacity: 0;
  content: '✖';
  display: inline-block;
  transition: all .25s linear 0s;
}
​
.hidden-checkbox:checked + label:after {
  pointer-events: auto;
  opacity: 1;
  left: 0.25em;
  width: 1em;
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers