<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="mt-5 p-5"> <h2 class="text-center mb-5"><b>Coloring Focus Form Input Bootstrap 4</b></h2> <div class="form-row"> <div class="form-group col-md-3"> <label for="formEmail">Form Focus Default Bootstrap 4</label> <input type="email" class="form-control" id="formEmail" aria-describedby="emailHelp" placeholder="Klik aku mas.."> </div> <div class="form-group col-md-3"> <label for="formPass">Form Focus Custom Merah</label> <input type="password" class="form-control" id="formPass" aria-describedby="emailHelp" placeholder="Klik aku mas.."> </div> <div class="form-group col-md-3"> <label for="formText">Form Focus Custom Hijau</label> <input type="text" class="form-control" id="formText" aria-describedby="emailHelp" placeholder="Klik aku mas.."> </div> <div class="form-group col-md-3"> <label for="formNumber">Form Focus Custom Kuning</label> <input type="number" class="form-control" id="formNumber" aria-describedby="emailHelp" placeholder="Klik aku mas.."> </div> </div> </div>

label { font-weight: 700; } .form-group:nth-child(1) label { color: #007BFF; } .form-group:nth-child(2) label { color: #BE1F1D; } .form-group:nth-child(3) label { color: #1CD766; } .form-group:nth-child(4) label { color: #FFB814; } input[type="password"]:focus { border-color: #BE1F1D; box-shadow: 0 0 0.2rem 0.2rem rgba(190, 31, 29, 0.25); } input[type="text"]:focus { border-color: #1CD766; box-shadow: 0 0 0.2rem 0.2rem rgba(28, 215, 102, 0.25); } input[type="number"]:focus { border-color: #FFB814; box-shadow: 0 0 0.2rem 0.2rem rgba(255, 184, 20, 0.25); }