Change checkbox styles to match all the rest in a form

I use this login form from a Fluent Kit framework, third on the right in the example, the dark one.

It misses one detail I don't know how to change: the checkbox input (you can find it's docs here, nothing unexpected, really), when checked, is not in frameworks info color like the rest of the sign-up form, it is primary. Any idea how I change it, or how would I generate styles for different checkboxes, so I can use not only the primary one, but others too?


Here I tried to recreate the styles using the template links from the codepen:

input[id^="login2"]::-webkit-input-placeholder { color: #444444; }
:-moz-placeholder {
    color: #444444;
    opacity: 1;
}
input[id^="login2"]::-moz-placeholder {
    color: #444444;
    opacity: 1;
}
input[id^="login2"]:-ms-input-placeholder { color: #444444; }
input[id^="login2"]::-ms-input-placeholder { color: #444444; }
input[id^="login2"]::placeholder { color: #444444; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.3.0/css/fluent-kit.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.2.0/js/fluent-kit.min.js"></script>

<div class="row">

  <div class="col-xl-4 col-lg-6 col-md-8 py-2">
    <div class="mt-5 mt-md-0 bg-dimgrey text-white shadow-lg">
      <h5 class="py-3 text-center bold bg-darkdimgrey">
        Sign <span class="text-info">in</span>
      </h5>
      <div class="px-3"><hr class="my-0"></div>
      <div class="px-3 pt-3">
        <fieldset>
          <label for="login2-email">Email</label>
          <input id="login2-email" type="email" name="email" placeholder="me@example.com">
        </fieldset>
        <fieldset>
          <label for="login2-password">Password</label>
          <input id="login2-password" type="password" name="password" placeholder="******************" class="input-with-button"/>
          <button class="mi mi-PasswordKeyHide text-info" data-toggle-password-visibility></button>
        </fieldset>
        <div class="d-flex my-2">
          <fieldset>
            <input type="checkbox" id="login2-remember-me" />
            <label for="login2-remember-me">Remember me</label>
          </fieldset>
          <small class="ml-auto"><a class="text-info bold" href="#">Forgot password?</a></small>
        </div>
        <div class="d-flex pb-3 mt-2">
          <small class="d-inline-block py-1">
            Not a member? <a class="text-info bold" href="#">Register</a>
          </small>
          <button class="ml-auto mt-0 btn btn-md btn-rounded btn-info cta">
            Sign in
            <i class="mi mi-ChevronRight"></i>
          </button>
        </div>
        <div class="pb-3 text-center">
          <small class="d-block mb-3">or sign in with</small>
          <div class="pb-3 d-flex justify-content-around">
            <a class="text-white" href="#"><i class="mi mi-facebook"></i></a>
            <a class="text-white" href="#"><i class="mi mi-twitter"></i></a>
            <a class="text-white" href="#"><i class="mi mi-google"></i></a>
            <a class="text-white" href="#"><i class="mi mi-linkedin"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>

1 answer

  • answered 2018-07-12 04:48 Nandita Arora Sharma

    Add this style

    input[type=checkbox]#login2-remember-me:checked+label:after {
      background-color: #00B7C3;
    }
    

    input[type=checkbox]#login2-remember-me:checked+label:after {
      background-color: #00B7C3;
    }
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.3.0/css/fluent-kit.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.2.0/js/fluent-kit.min.js"></script>
    
    <div class="row">
    
      <div class="col-xl-4 col-lg-6 col-md-8 py-2">
        <div class="mt-5 mt-md-0 bg-dimgrey text-white shadow-lg">
          <h5 class="py-3 text-center bold bg-darkdimgrey">
            Sign <span class="text-info">in</span>
          </h5>
          <div class="px-3">
            <hr class="my-0">
          </div>
          <div class="px-3 pt-3">
            <fieldset>
              <label for="login2-email">Email</label>
              <input id="login2-email" type="email" name="email" placeholder="me@example.com">
            </fieldset>
            <fieldset>
              <label for="login2-password">Password</label>
              <input id="login2-password" type="password" name="password" placeholder="******************" class="input-with-button" />
              <button class="mi mi-PasswordKeyHide text-info" data-toggle-password-visibility></button>
            </fieldset>
            <div class="d-flex my-2">
              <fieldset>
                <input type="checkbox" id="login2-remember-me" />
                <label for="login2-remember-me">Remember me</label>
              </fieldset>
              <small class="ml-auto"><a class="text-info bold" href="#">Forgot password?</a></small>
            </div>
            <div class="d-flex pb-3 mt-2">
              <small class="d-inline-block py-1">
                Not a member? <a class="text-info bold" href="#">Register</a>
              </small>
              <button class="ml-auto mt-0 btn btn-md btn-rounded btn-info cta">
                Sign in
                <i class="mi mi-ChevronRight"></i>
              </button>
            </div>
            <div class="pb-3 text-center">
              <small class="d-block mb-3">or sign in with</small>
              <div class="pb-3 d-flex justify-content-around">
                <a class="text-white" href="#"><i class="mi mi-facebook"></i></a>
                <a class="text-white" href="#"><i class="mi mi-twitter"></i></a>
                <a class="text-white" href="#"><i class="mi mi-google"></i></a>
                <a class="text-white" href="#"><i class="mi mi-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    </div>