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

The attempt to connect with react-native-fetch-blob has not been successful

How do I resolve the issue of displaying a PDF from my assets folder in an Expo, React Native project using react-native-pdf? While scanning folders for symlinks, encountered an error with RNFetchBlob library in my project directory. The automatic linki ...

javascriptandroidreactjspdfreact-native

Transferring the link value to an AJAX function when the onclick event is triggered

I have a link containing some data. For example: <li><a href="" onclick="getcategory(this);"><?php echo $result22['category']; ?></a></li> I need this link to pass the value of $result22['category']; to ...

phpjavascripthtmlajax

Ways to remain on the same page even after submitting a form

I've been searching for a solution to my specific issue for days, but haven't had any luck. Can anyone provide assistance? I have a form on my website that is supposed to send an email when clicked, while also converting the div from a form to a ...

javascriptphphtmlajaxforms

jQuery does not trigger background image change in Webkit

const displayPreviewImage = (imageUrl) => { $('#slideshow-container').css("background-image", `url('files/images/store/content/templates/websites/preview_images/${imageUrl}'`); } I have a function here th ...

jquerycssajaximagebackground

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Is there a way in jQuery to make all browsers act as if they have CSS3 capabilities? ...

javascriptjquerycss

Tips for efficiently displaying a computed property on a template using Vuetify?

I am attempting to display only the initials of a user who is logged in while inside a store. Here is my template: <v-menu v-if="this.$store.getters.getLoggedUser"> <template v-slot:activator="{ on, attrs, userInitials }&quo ...

javascriptvue.jsvuetify.jsvuex

Load the flexslider once the fancybox container is opened

In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a ...

javascriptjqueryhtmlfancyboxflexslider

'The error thrown states: "ReferenceError: httpResponse is not defined" occurs while attempting to parse the JSON response from a Parse HTTP

My commitment statement involves sending multiple requests to eBay, each time using the properties of a matchCenterItem as parameters. Once all instances have been processed, I aim to transmit all the responses to my iOS application. However, my effort to ...

javascriptjsonparse-platformpromise

Activate click events when button is being held down

I'm currently working on a directive that shifts an element to the right whenever clicked. However, I want the element to keep moving as long as the button is pressed. .directive("car", function(){ return { restrict:"A", link:func ...

javascriptangularjsangularjs-directive

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

javascripthtmlcssloopsdom

What is the mechanism by which the useState hook in React determines the calling context?

After transitioning from using class components to functional components in React, I delved into the documentation with keen interest to understand how the useState hook functions. Upon consulting the FAQ page, it was explained that each component has an ...

javascriptreactjsreact-hookscomponents

Is it detrimental to my search engine ranking if I utilize CSS display:none?

Imagine having valuable content that is initially hidden with CSS, and then using javascript to reveal it only when the user clicks on certain links. Even users without javascript enabled can access this content by following the links to a new page where i ...

javascriptcssseo

Switching the default image using jQuery upon click event

When I click on the image, I want to see a new image appear for just one second before returning to the default. I tried using setTimeout() function, but even after one second, I still see the same pressed.svg image. Here is my complete code: <html> ...

javascriptjqueryhtml

Accessing data from localhost using Vue.js and Axios is restricted due to CORS policy and the error "Access to XMLHttpRequest" may be

Having a minor issue... Trying to retrieve a basic json file from my server for testing purposes (not an actual API). Utilizing VueJS and axios. Here is my code : getServicesAPI() { axios.get("http://51.91..../dist/API/Services.json").the ...

javascriptvue.jsgetaxioslocalhost

Tips for resolving the error message: React is not able to identify the `currentSlide` and `slideCount` prop on a DOM element

I recently implemented an image slider using "react-slick" in my next.js project. However, I encountered some warnings in the console related to the 'currentSlide' and 'slideCount' props on a DOM element. Warning: React does not recogni ...

javascriptreactjsnext.js

Instructions on how to utilize cookies for triggering a modal dialog just once: The modal dialog can be displayed again after the passage of a week

I am interested in implementing a cookie-based solution to ensure that the modal dialog is only displayed once within a week. The idea is for the modal to appear when the document loads, and after it is closed, it should not reappear until 7 days have pass ...

jquerycookiesmodal-dialog

Display the most recent information from a MySQL table instantly using jQuery after the data has been updated

I have a table called user. The data is shown below: +----------+----------+ | ID | money | +----------+----------+ | 1 | 100 | | 2 | 200 | +---------------------+ The code in my file t.php looks like this: / ...

phpjquerymysql

Achieving a specific length in various classes within a jQuery plugin can be accomplished by implementing targeted

I am in search of a jQuery plugin that can display the count of elements within each class separately. For example, I would like the output to be as follows: the result is: 4 the result is: 6 However, when I try this code snippet, the actual result I get ...

jquery

Encountering the error "ReferenceError: Cannot access 'data' before initialization" during deployment on Vercel

I encountered a problem with my project after trying to implement dynamic routing. Initially, everything was working fine locally and during deployment. However, when I attempted to incorporate dynamic routing, errors started to occur. Unfortunately, I am ...

javascriptreactjsnext.js

detecting key presses on documents using javascript

I'm having trouble capturing document-level key press events on a webpage. I've tried using the following code: $(document).bind('keydown', 'a', keyevent_cb); It works fine in IE, but it's not consistent in Firefox. I&a ...

javascriptjqueryajaxweb