Numerous Toggle Switches Integrated in CSS Styling

My goal is to create multiple toggle switches on one page, but I'm encountering an issue where creating a new switch ends up controlling the first switch I created. The toggle switch I want to make functions like an on and off switch on an iPhone. Here is a link to a code snippet that demonstrates this.

.switch {
  font: 16px "adiHaus-Bold", Arial, sans-serif;
  text-transform: uppercase;
  position: relative;
  border-top: #CCC solid 1px;
  border-bottom: #EEE solid 1px;
  border-right: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 2px;
  height: 40px;
  width: 130px;
  margin: .2em;
  @include border-radius(3px);
  @include background-clip(padding-box);
  background-color: #EFEFEF;
  @include background-image(linear-gradient(bottom, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .07) 100%));
}
.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 63px;
  line-height: 42px;
  font-size: 16px;
  letter-spacing: 0;
  color: #CDCDCD;
  text-align: center;
  cursor: pointer;
}
.switch-label-off {
  text-shadow: 0px 1px 0px #FFFFFF;
}
.switch-label-on {
  text-shadow: 0px 1px 0px #FFFFFF;
}
.switch-input {
  display: none;
}
.switch-input:checked + .switch-label {
  color: #000;
  font-weight: bold;
  -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 65px;
}
.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 63px;
  height: 38px;
  @include border-radius(2px);
  @include background-clip(padding-box);
  background-color: #ffffff;
  -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
label,
.form-label-text {
  display: inline-block;
  margin-right: 0 !important;
  vertical-align: middle;
}
<span class="form-title">Hand:</span>
<div class="switch">
  <input type="radio" class="switch-input" name="view" value="one" id="one" checked>
  <label for="one" class="switch-label switch-label-off">L</label>
  <input type="radio" class="switch-input" name="view" value="two" id="two">
  <label for="two" class="switch-label switch-label-on">R</label>
  <span class="switch-selection"></span>
</div>

htmlcsstoggle

Answer №1

Because you're using the same classes for both inputs, only the first one will slide when :checked is triggered.

Try assigning IDs to each individual input.

Note:

You also need to add a closing div.

.switch {
  font: 16px "adiHaus-Bold", Arial, sans-serif;
  text-transform: uppercase;
  position: relative;
  border-top: #CCC solid 1px;
  border-bottom: #EEE solid 1px;
  border-right: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 2px;
  height: 40px;
  width: 130px;
  margin: .2em;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #EFEFEF;
  background-image: linear-gradient(bottom, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .07) 100%);
}
.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 63px;
  line-height: 42px;
  font-size: 16px;
  letter-spacing: 0;
  color: #CDCDCD;
  text-align: center;
  cursor: pointer;
}
.switch-label-off {
  text-shadow: 0px 1px 0px #FFFFFF;
}
.switch-label-on {
  text-shadow: 0px 1px 0px #FFFFFF;
}
.switch-input {
  display: none;
}
#one:checked + .switch-label,
#three:checked + .switch-label {
  color: #000;
  font-weight: bold;
  -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
#one ~.switch-input:checked + .switch-label-on ~ .switch-selection,
#three ~.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 65px;
}
.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 63px;
  height: 38px;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #ffffff;
  -webkit-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition: 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  -o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
label,
.form-label-text {
  display: inline-block;
  margin-right: 0 !important;
  vertical-align: middle;
}
<span class="form-title">Hand:</span>
<div class="switch">
  <input type="radio" class="switch-input" name="view" value="one" id="one" checked>
  <label for="one" class="switch-label switch-label-off">L</label>
  <input type="radio" class="switch-input" name="view" value="two" id="two">
  <label for="two" class="switch-label switch-label-on">R</label>
  <span class="switch-selection"></span>
</div>
<hr />

<span class="form-title">Hand:</span>
<div class="switch">
  <input type="radio" class="switch-input" name="view" value="three" id="three" checked>
  <label for="three" class="switch-label switch-label-off">L</label>
  <input type="radio" class="switch-input" name="view" value="four" id="four">
  <label for="four" class="switch-label switch-label-on">R</label>
  <span class="switch-selection"></span>
</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

What is the best way to ensure that the positioning of the text adapts to

Whenever I adjust the screen size, the text in front of the slider moves. I utilized the grid system in Bootstrap 5.2 to position it. My goal is to keep the text in its original position relative to the carousel when changing the screen size. Here is my co ...

htmlcssbootstrap-5

What could be causing this Form to redirect to the incorrect file path?

I recently updated the login menu for my Admin panel. Initially, the login page was named login.php, but I decided to change it to index.php. Even though I made sure to update the action from login.php to index.php, when I click on the login button it st ...

htmlforms

Bootstrap 4 sidebar with a static width, when switched to mobile view the main content area vanishes

While searching for a solution to create a fixed width sidebar on Bootstrap 4, I have come across many examples. However, none of them seem to maintain the main content on mobile devices. I have experimented with the following code: <div class="row no ...

csstwitter-bootstrapbootstrap-4

The Vue 3 page does not allow scrolling unless the page is refreshed

I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using <router-link to ="/Dashboard"/> Here is the code for Dashboard.vue: <template> <div class="enquiry"> <div class= ...

cssvue.jsvuejs3bootstrap-vuevue-composition-api

How can I dynamically update a div without refreshing the page by using an onclick event on a

When working on my project, I found helpful insights from this Stack Overflow thread. The structure of template-comparison.php involves fetching code from header.php to ensure the page displays properly. However, the actual "fetch code" process remains un ...

javascriptphpjqueryhtml

Incorporate a dynamic form into an ngx-sortable control in Angular 6

Having difficulty with the layout implementation in Angular 6. A form component is dynamically added during runtime. Using ngx-sortable, I aim to have dynamic content within it, but am facing challenges with the setup. Implementing Sortable control: &l ...

angularhtml

Positioning CSS icons beside text

I'm having trouble aligning a close button I created in CSS with regular text. Although the containing span element seems to align with the adjacent text, it doesn't align properly with the child divs. <a class="event-filter button" href="#"& ...

htmlcss

Eliminate the margin and padding on a floating table header

After scrolling, I am attempting to position the thead element. However, when changing the position from static to absolute, the element becomes offset with added margin and padding. This has led me to try using CSS to address the issue: To resolve this, ...

htmlcsstwitter-bootstrap

Troubleshooting: HTML drop-down menu experiencing malfunctions

As a newcomer to the realm of HTML, I am eager to kickstart my online portfolio. After successfully setting up the navigation bar, I have now turned my focus towards creating a dropdown menu within the nav bar. Unfortunately, I've hit a roadblock as t ...

htmlcss

What is the method to turn off readonly property for input fields in Laravel?

I'm encountering an issue with my Laravel project. I have a form with an input field that has the readonly attribute set. <input type="text" name="anamFam" id="anamFam" value="{{$aFam->anam_cont}}" readonly> When I click the edit button, I ...

javascriptphpjqueryhtmllaravel

How to align text to the right with ellipsis and button in a ReactJS component

In a specific scenario, I need to display a button on the right corner of the header. The selected filter value should appear next to the filter button like this: | Between 01/23/2018 and 07/30/2018 {button}| As the user changes the screen size, I want to ...

htmlcssreactjsellipsis

The QWebview is not rendering the HTML page correctly

I am currently working on a software project that includes a QWebView for displaying HTML files. However, I am facing an issue with the welcome page not displaying correctly. Instead of having an image between the red lines at the center, it appears unusua ...

htmlcssqtqwebview

What's the deal with inline blocks and text in the middle?

Check out this code I created for a navigation bar. HTML : <div class="header-nav"> <div class="header"> <img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" /> </div> <div class="nav" align="c ...

htmlcss

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

javascripthtmlcssd3.jssvg

Which tag should I use, <b> or <mark>, to emphasize important marketing terms within a paragraph?

Trying to emphasize specific keywords in a paragraph of text can be challenging. I'm currently puzzled about the distinction between the <b> and <mark> tags. These words are highlighted because they play a crucial role in marketing, prompt ...

html

Ensure that the <div> element expands and takes up all available space on the screen, without exceeding the viewable screen area

Is it possible to size a div element so that it occupies all available remaining space, but if its content exceeds the available space, the overflow is contained within without resizing or changing the height of the element? The element should have a fixed ...

htmlcssresponsive-designoverflowbootstrap-5

I am attempting to design an HTML page to serve as the body of an email. Can anyone advise me on how to effectively pass it into my setBody() function while using yiiMail?

On one of my .php pages, I have the following code snippet: <html> <head></head> <body> Hi <?php echo $user['first_name'].' '.$user['last_name']?>, <br><br> To reset your ...

phphtmlemailyii

Tips on rearranging the location of a div element within a directive

I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-swi ...

javascripthtmlcssangularjsangularjs-directive

There is no need for updates as git is already current for some mysterious reason

As a newcomer to git, I've been trying to wrap my head around it but still struggling. Can someone help clarify this for me? My question pertains to the 'master' branch in git which contains the following code: const list = [ 'h&ap ...

javascripthtmlgitgithubconsole.log

Looking to display a submenu next to its parent element

I have a list that is not in order: <ul> <li>Parent-1 <ul> <li>Child-1</li> <li>Child-2</li> <li>Child-3</li> </ul> </li> <li>Parent-2 <ul> <li>Ch ...

jqueryhtmlcssmenu