如何有一个开关，同时显示一开一关？

Question

I have an on-off switch and would like for one to display as off (grey color) and one to display as on (blue color), with on being the default. In this specific case, I want the first row to have blue "on" elements, with the second and third-row displaying the toggle switch as off or grey.

I've tried adding additional elements in the css but nothing has worked so far.

 .switch { position: relative; display: inline-block; width: 38px; height: 22px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #98B3DD; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:focus+.slider { box-shadow: 0 0 1px rgb(221, 223, 235); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

 <ul class="list-group list-group-flush"></ul> <div class="row"> <div class="col-xl-11"> <div class="table-responsive"> <table class="table"> <thead> <tr></tr> </thead> <tbody> <tr> <td>Device 1</td> <td><i class="far fa-edit fa-2x text-#98B3DD" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i></td> <td><i class="far fa-times-circle fa-2x text-#98B3DD" style="font-size: 25px;"></i></td> <td><label class="switch"><input type="checkbox" /><span class="slider round"></span></label></td> </tr> <tr> <td>Device 2</td> <td><i class="far fa-edit fa-2x text-gray-300" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i></td> <td><i class="far fa-times-circle fa-2x text-gray-300" style="font-size: 25px;"></i></td> <td><label class="switch"><input type="checkbox" /><span class="slider round"></span></label></td> </tr> <tr> <td>Device 3</td> <td><i class="far fa-edit fa-2x text-gray-300" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i></td> <td><i class="far fa-times-circle fa-2x text-gray-300" style="font-size: 25px;"></i></td> <td><label class="switch"><input type="checkbox" /><span class="slider round"></span></label></td> </tr> </tbody> </table> </div> </div> </div> <div class="row"> <div class="col-xl-11"> <div><button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#addnewdevice">Add New Device</button> <div class="collapse" id="addnewdevice">

Answer 1

I think I have found a solution, the comments in the code explain the changes I have made.

 .switch { position: relative; display: inline-block; width: 38px; height: 22px; } .switch input { display:none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #98B3DD; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:focus + .slider { box-shadow: 0 0 1px rgb(221, 223, 235); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* ADDED THIS BELOW */ input:checked + .slider:before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); } input:checked + .slider { background-color: blue; }

 <!-- In the input tag I added the word *checked* for Device 1 and left it out for Device 2 and Device 3 --> <ul class="list-group list-group-flush"></ul> <div class="row"> <div class="col-xl-11"> <div class="table-responsive"> <table class="table"> <thead> <tr></tr> </thead> <tbody> <tr> <td>Device 1</td> <td><i class="far fa-edit fa-2x text-#98B3DD" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i></td> <td><i class="far fa-times-circle fa-2x text-#98B3DD" style="font-size: 25px;"></i></td> <td><label class="switch"><input checked type="checkbox" /><span class="slider round"></span></label></td> </tr> <tr> <td>Device 2</td> <td><i class="far fa-edit fa-2x text-#98B3DD" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i></td> <td><i class="far fa-times-circle fa-2x text-#98B3DD" style="font-size: 25px;"></i></td> <td><label class="switch"><input type="checkbox" /><span class="slider round"></span></label></td> </tr> <tr> <td>Device 3</td> <td><i class="far fa-edit fa-2x text-#98B3DD" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i></td> <td><i class="far fa-times-circle fa-2x text-#98B3DD" style="font-size: 25px;"></i></td> <td><label class="switch"><input type="checkbox" /><span class="slider round"></span></label></td> </tr> </tbody> </table> </div> </div> </div> <div class="row"> <div class="col-xl-11"> <div><button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#addnewdevice">Add New Device</button> <div class="collapse" id="addnewdevice">

Answer 2

I have added two css classes (.switch-on and .switch-off) to display switch in on and off state. Is this something like what you want ?

 .switch { position: relative; display: inline-block; width: 38px; height: 22px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: 0.4s; transition: 0.4s; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; bottom: 3px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; } .slider-on { background-color: #98b3dd; } .slider-off { background-color: #ccc; } .slider-on::before { left: 3px; } .slider-off::before { right: 3px; } input:focus + .slider { box-shadow: 0 0 1px rgb(221, 223, 235); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

 <div class="row"> <div class="col-xl-11"> <div class="table-responsive"> <table class="table"> <thead> <tr></tr> </thead> <tbody> <tr> <td>Device 1</td> <td> <i class="far fa-edit fa-2x text-#98B3DD" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i> </td> <td> <i class="far fa-times-circle fa-2x text-#98B3DD" style="font-size: 25px;"></i> </td> <td> <label class="switch"><input type="checkbox"/><span class="slider slider-on round" ></span ></label> </td> </tr> <tr> <td>Device 2</td> <td> <i class="far fa-edit fa-2x text-gray-300" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i> </td> <td> <i class="far fa-times-circle fa-2x text-gray-300" style="font-size: 25px;"></i> </td> <td> <label class="switch"><input type="checkbox"/><span class="slider slider-off round" ></span ></label> </td> </tr> <tr> <td>Device 3</td> <td> <i class="far fa-edit fa-2x text-gray-300" style="font-size: 25px;height: 22px;margin-left: 2px;margin-right: 2px;"></i> </td> <td> <i class="far fa-times-circle fa-2x text-gray-300" style="font-size: 25px;"></i> </td> <td> <label class="switch"><input type="checkbox"/><span class="slider slider-off round" ></span ></label> </td> </tr> </tbody> </table> </div> </div> </div>