What is the best way to implement a switch that can simultaneously display both the on and off positions?

I need help customizing a toggle switch element in CSS. I want the first row to display as on (blue color) and the second and third rows to be displayed as off or grey.

So far, my attempts to modify the CSS code have been unsuccessful.

.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">

javascriptjqueryhtmlcss

Answer №1

After thorough analysis, I have successfully identified a resolution with detailed explanations in the code comments.

.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

Do you like the toggle switch design I created with two CSS classes (.switch-on and .switch-off)? Let me know if this meets your requirements.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Cufon Compatibility with Internet Explorer - Investigating a CSS Problem

Currently facing an unusual issue. I am creating a Wordpress theme with Cufon and it works flawlessly in Chrome and Firefox, but refuses to render in IE. I decided to put this problem on hold and focus on it later as I am still in the development phase. Y ...

cssinternet-explorercufon

Steps to implement jQuery after executing the command "npm install jquery"

Greetings! I recently utilized npm install jquery to add jQuery to my project. However, I noticed that it was downloaded into node_modules\jquery along with some unnecessary files. My goal is to only move node_modules\jquery\dist\jquer ...

javascriptjquerynpm

Is it possible to utilize global variables within CSS properties?

I have a scenario where I need to dynamically change values in an animation. The line of code that needs modification is: clip-path: polygon(var(clip1) 0, 100% 1%, 100% 100%, 50% 100%); let root = document.documentElement; root.style.setProperty('c ...

javascriptcssdomcss-selectors

Unique validation feature implemented in Parsley.js runs through validation loop twice

I've spent the entire afternoon trying to figure this out, but I just can't seem to debug it. The issue arises when I do a hard refresh of the page and my custom async validator runs twice, yet only sends one request to the server. window.Parsle ...

javascriptjqueryajaxparsley.js

jQuery Table Sorting - Reorder Automatically Upon Page Initialization

I stumbled upon this amazing JS Fiddle. How can I tweak it to sort the third column in descending order when the page loads? $(document).on('click', 'th', function() { var table = $(this).parents('table').eq(0); var rows ...

jquery

Problem with handling success of AJAX form submission

I am encountering a problem where my AJAX form submission triggers an alert that seems to display the entire page instead of just the success message, and I am unable to pinpoint what I might be doing incorrectly. In addition, despite trying various sugges ...

phpjqueryajax

What is the best way to display a Bootstrap toggle?

I am facing an issue with a Bootstrap toggle in a Handlebars template. When the page initially loads, the toggle is visible, however, after re-templating the Handlebars template that contains the toggle, it disappears. Before Re-Template: Initial code : ...

javascriptjquerycsstemplatestwitter-bootstrap

Issue with Durandal dialog repositioning failing to function

I've been attempting to adjust the positioning of a Durandal dialog, but have been unsuccessful so far. The code snippet I'm using is as follows: this.compositionComplete = function (child, parent, context) { dialog.getContext().reposition(c ...

javascriptdurandal

Can we be confident in the security and effectiveness of utilizing ajax for login implementation?

Hello, I've written the code below to verify if a user is eligible to log in to a database. I've utilized SSL to secure the connection, but I'm unsure if this is still an effective method. Could anyone provide some advice? Thank you for your ...

htmlajaxauthentication

Populate an array of objects with various key-value pairs

In my @change method, I receive the following values: changeAttr(id, key, value) { const selections = []; }, id can be any number, key could be: color, size, sex, etc..., and value could be: red, 8, female, etc. Initially, the values might look like ...

javascriptvue.js

Identify the occurrence of isolated "<" or ">" characters in a string that includes HTML elements

As an example, consider a string similar to: "This is a <b> Sample </b> string with characters < 100" The user has the ability to include HTML tags such as <b>, <div>, and more. These tags are permitted in this scenario. The ma ...

html

Unable to generate webpage source code

Having some trouble with my Next.js project as I'm using getStaticProps and getStaticPath to build a page, but unfortunately, the HTML is not being generated in the page source. This issue is causing problems with SEO, and I haven't implemented r ...

htmlreactjsnext.jsseoserver-side-rendering

Selenium IDE: Triggering an Ajax request on play button activation

Is it possible to trigger an Ajax call using jQuery $.ajax function in Selenium IDE when the user clicks the play button? I haven't been able to find any information on how to accomplish this after searching online for 20 minutes. ...

ajaxjqueryseleniumselenium-ide

What is the method to group a TypeScript array based on a key from an object within the array?

I am dealing with an array called products that requires grouping based on the Product._shop_id. export class Product { _id: string; _shop_id: string; } export class Variant { variant_id: string; } export interface ShoppingCart { Variant: ...

javascriptarraysangulartypescript

Push the accordion tab upwards towards the top of the browser

I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...

javascriptjquerycssaccordion

What is the best way to incorporate Express following an asynchronous function?

After setting up my Firebase and initializing it, I managed to retrieve data from it. However, I encountered an issue when trying to use express.get() and json the data into the server. I'm unsure of what the problem could be. let initializeApp = requ ...

javascriptnode.jsreactjsfirebase

The border in my HTML table is not displaying when I run my flask application

My flask application was running smoothly in a virtual environment until I encountered an issue with the html borders not showing up. Even after seeking help from a friend who knows some html, the problem still persists. app.py: from flask import Flask, r ...

pythonhtmlcssflaskvirtualenv

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

cssangular

Navigating a page without embedding the URL in react-router-dom

In my application, I am utilizing react-router-dom v5 for routing purposes. Occasionally, I come across routes similar to the following: checkup/step-1/:id checkup/step-2/:id checkup/step-3/:id For instance, when I find myself at checkup/step-1/:id, I int ...

javascriptreactjstypescriptreact-router-dom

Automatically choosing a radio button in a carousel using Angular

My Angular application includes the npm-hm-carousel. I am looking to automatically select the item in the center of the carousel, similar to the image provided. However, I also need to bind one of the ids to the selected item as I scroll through the carous ...

javascriptangularnpmradio-buttoncarousel