Checkbox css3/html5

Checkbox css3/html5

by Sergey Linnick

HTML

<link rel="stylesheet" href="https://qa-book.mylimobiz.com/v4/content/css/styles.css">
<div class="ors">
		<div id="outer-wrap">
			<div id="inner-wrap">
				<div class="container-fluid">
					<header id="top" class="ors-menu-top">
						<nav class="navbar navbar-default">
							<div class="container-fluid">
								<ul class="nav navbar-nav pull-left">
									<li><a href="#">New Reservation</a></li>
								</ul>
								<div class="nav navbar-nav navbar-right pull-right">
									<div class="dropdown ors-btn-login-outer">
										<span id="holderLoginForm" class="ors-btn-login" aria-expanded="false" role="button" aria-haspopup="true" data-toggle="dropdown">
												<span class="icon-log-in"></span>
										<span class="ors-pseudo-link">Login</span>
										</span>
										<div aria-labelledby="holderLoginForm" class="dropdown-menu tab-content ors-popup-static" role="menu">
											<h4 class="ors-popup-static-title">Login</h4>
											<div role="tabpanel" class="tab-pane active" id="formLogin">
												<form action="#" method="post" role="form">
													<div class="form-group">
														<label for="emailAddressLogin">Email Address</label>
														<input type="email" class="form-control" id="emailAddressLogin" tabindex="51" required>
													</div>
													<div class="form-group">
														<label for="passwordLogin">Password</label>
														<div class="pull-right" role="tablist"><a href="#formResetPassword" aria-controls="formResetPassword" role="tab" data-toggle="tab">Forgot password?</a></div>
														<input type="password" class="form-control" id="passwordLogin" tabindex="52" required>
													</div>
													<div class="form-group">
														<button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="53">Login</button>
													</div>
													<div class="center">Don&#8217;t have an account? <a href="#">Register...

SCSS

input[type="checkbox"] {
  position: absolute;
  left: -9999px;
  & + label {
    display: inline-block;
    vertical-align: top;
    padding: 0 0 0 25px;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    width: auto !important;
    &:before {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      position: absolute;
      top: 3px;
      left: 0;
    }
    &:after {
      content: '';
      display: none;
      width: 6px;
      height: 10px;
      border-bottom: 3px solid #fff;
      border-right: 3px solid #fff;
      position: absolute;
      top: 6px;
      left: 7px;
      transform: rotate(45deg);
      transition: all 0.3s ease-in-out;
    }
  }
  &:checked {
    & + label {
      &:after {
        display: block;
      }
      &:before{
        background: #2394cc;
        border-color: #2394cc;
      }
    }
  }
  &:hover:not([disabled]){
    & + label {
      &:before{
        border-color: #8a8a8a;
      }
    }
  }
  &[disabled]{
    & + label {
    opacity: 0.65;
    }
  }
  &[disabled]:not([checked]){
    & + label {
    &:before{
        background: #f1f1f1;
      }
    }
  }
  &[disabled]:hover{
    & + label {
    cursor: not-allowed;  
    }
  }
}
 input[type="checkbox"][checked]:hover + label:before {
    border-color: #2394cc; 
    }

JavaScript

$(document).ready(function() {
  $('#showLocation').change(function() {
    if (!this.checked) {
      $('#dropOffStep1Holder').fadeOut(100);
    } else {
      $('#dropOffStep1Holder').fadeIn(300);
    }
  });
});