The initial toggle switch is not visible

https://i.sstatic.net/6BMaY.png

After running this code, I'm facing an issue where the first toggle switch is not visible, while the second one displays and functions correctly. I'm unsure about what went wrong in the code. Can someone please assist me?

.switch input {
  display: none;
}

.switch {
  display: inline-block;
  width: 60px;
  height: 30px;
  margin: 8px;
  transform: translateY(50%);
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #777;
  border-radius: 30px;
  transform: translateX(-30px);
  transition: .4s;
}

input:checked+.slider:before {
  transform: translateX(30px);
  background: limeGreen;
}

input:checked+.slider {
  box-shadow: 0 0 0 2px limeGreen, 0 0 2px limeGreen;
}
<div>
  <label class="switch">
                <input type="checkbox" value="Maths" name="Maths>
                <span class="slider"></span>
            </label> Maths
</div>
<div>
  <label class="switch">
                <input type="checkbox" name="Science" value="Science">
                <span class="slider"></span>
            </label> Science
</div>

The goal is to have both switches displayed properly on the screen together.

css

Answer №1

Oops! Looks like you forgot to add a closing quotation mark after name="Maths

The correct syntax should be:

<div>
    <label class="switch">
        <input type="checkbox" value="Maths" name="Maths">
        <span class="slider"></span>
    </label>
    Maths
</div>
<div>
    <label class="switch">
        <input type="checkbox" name="Science" value="Science">
        <span class="slider"></span>
    </label>
    Science
</div>

Answer №2

name="Maths to name="Maths". Make sure you don't forget the closing double quote. Verify that.

   .switch input { 
    display:none;
}
.switch {
    display:inline-block;
    width:60px;
    height:30px;
    margin:8px;
    transform:translateY(50%);
    position:relative;
}

.slider {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:30px;
    box-shadow:0 0 0 2px #777, 0 0 4px #777;
    cursor:pointer;
    border:4px solid transparent;
    overflow:hidden;
     transition:.4s;
}
.slider:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    background:#777;
    border-radius:30px;
    transform:translateX(-30px);
    transition:.4s;
}

input:checked + .slider:before {
    transform:translateX(30px);
    background:limeGreen;
}
input:checked + .slider {
    box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen;
}
<div>
        <label class="switch">
            <input type="checkbox" value="Maths" name="Maths">
            <span class="slider"></span>
        </label>
        Maths
    </div>
    <div>
        <label class="switch">
            <input type="checkbox" name="Science" value="Science">
            <span class="slider"></span>
        </label>
        Science
    </div>

Answer №3

You made a typo error - the inverted comma " is missing after name="Maths

.switch input {
  display: none;
}

.switch {
  display: inline-block;
  width: 60px;
  height: 30px;
  margin: 8px;
  transform: translateY(50%);
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 30px;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #777;
  border-radius: 30px;
  transform: translateX(-30px);
  transition: .4s;
}

input:checked+.slider:before {
  transform: translateX(30px);
  background: limeGreen;
}

input:checked+.slider {
  box-shadow: 0 0 0 2px limeGreen, 0 0 2px limeGreen;
}
<div>
  <label class="switch">
                <input type="checkbox" value="Maths" name="Maths">
                <span class="slider"></span>
            </label> Maths
</div>
<div>
  <label class="switch">
                <input type="checkbox" name="Science" value="Science">
                <span class="slider"></span>
            </label> Science
</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 description in the lower design must not be on the same line or at the same height as the element

I'm facing an issue with CSS regarding achieving the same height. I have a list of designs, each with a description at the bottom. While I've successfully aligned the designs vertically between portrait and landscape orientations, the problem ari ...

htmlcssbootstrap-4

Converting from CAPS lock to using the capitalize property in CSS

Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices! I have come across similar ...

htmlsentencecss

The ellipsis text-overflow feature occasionally malfunctions during a single session when using IE 11

.show-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } <div class="container"> <div class="row show-ellipsis"> {{record.bodyName}} </div> </div> My web application supports versions o ...

htmlcss

What is the best way to line up the columns of various divs?

Is there a way to align the content of these different divs? I'm trying to match up the headers of each column with the corresponding items in the divs below. Can someone assist me in achieving this alignment? row-header-course should align with cou ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the process for incorporating a side group input with Bootstrap?

description of image here I am looking to add 4 small input boxes next to the third input box. Please refer to the image I have attached for reference. In the image, I have included 4 boxes. I am specifically looking for a similar layout. ...

htmlcssbootstrap-4

What is the reason for the ul selector not functioning in the attached CSS file?

I attempted to create a navigation bar by using the code below. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="background"> <ul> <li>Home</li> <li>Ne ...

csshtmlcss-selectors

What is the best way to create spacing between images in a CSS image slider?

UPDATE: I've made significant progress by modifying the code provided in the link below. I am very close to achieving my desired result, but there are parts of it that still puzzle me. The transition now has spacing on both sides and the hidden space ...

htmlcssoptimizationslideshow

Applying the 'overflow: scroll' property creates a scroll bar that remains fixed and cannot be scrolled

Looking to showcase the seating arrangement in a cinema hall. If the seats occupy more than 50% of the page, I want a scroll bar to appear. Attempted using "overflow-scroll" without success. View result image <div class="w-50"> <div ...

htmlcssvue.jsscrollfrontend

Tips on updating CSS styles for navigation bar links in real time

Currently, my homepage displays a CSS content hover effect when the user interacts with the icons. However, I am facing an issue where all icons show the same text "home" on hover. How can I customize the text output for each individual icon/link? Your hel ...

htmlcsssass

Spinning an object using JQuery

I am currently working on a project to test my skills. I have set up a menu and now I want to customize it by rotating the icon consisting of three vertical lines by 90 degrees every time a user clicks on it. This icon is only visible on smartphones when t ...

javascriptjqueryhtmlcssweb

Unable to calculate height properly when using the formula height: 70% + 0px

My attempt to set the height of a div element to 70% using CSS3's calc() function has been unsuccessful. While specifying viewport height (70vh) works, I specifically need the height to be 70%. .scroll-inner-container { height: -moz-calc(70vh + 0 ...

jqueryhtmlcsscss-selectors

Perfectly Positioned Overlay and Text on Top of an Inline SVG Element

Within my inline SVG code, there are circular icons representing different user progress stages, each customized with CSS styling. The SVG contains 5 stages of progress in total and is utilized within an Angular app. For any active stage, a corresponding ...

htmlcssangularjssvg

How to ensure scrollbar adjusts to increasing height when using scroll:auto?

My <div> element has the style property scroll:auto. Whenever text is added to the <div> and the content height exceeds the default height, I find myself having to scroll down in order to see the latest lines of text that have been added. What ...

jqueryhtmlcss

`Trying to conceal the tr elements on button click proves tricky with jquery`

I have a pair of buttons, #btn1 and #btn2, as well as two table rows, #tr1 and #tr2. The goal is to toggle the active state of the buttons when they are clicked by the user. The specific requirements are: When the button is set to active, the elements ...

jqueryhtmlcss

Managing the order of rows in Bootstrap specifically for mobile devices

Take a look at this simple HTML snippet on this fiddle that illustrates a specific layout on wide desktop screens: Here is the code responsible for rendering the above layout: <div class="container"> <div class="row"> <div class="col-md-4" ...

htmlcsstwitter-bootstrap

Vuetify displaying incorrectly following deployment

After creating a spa with vue.js for the frontend, I utilized the vuetify library for various components and layout. While everything looked great locally, upon deploying to Azure, all vuetify styling seemed to disappear. My custom css was still applying ...

cssazurevue.jsdeploymentvuetify.js

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

javascripthtmlcsssassmaterial-ui

Give a CSS Element a specific class

Can all h3 elements be styled with the class responsive-heading using only CSS? Take a look at the CSS snippet provided for more clarity: h3 { .responsive-heading } /* The responsive-heading class is defined in another CSS file and includes: .respons ...

javascripthtmlcss

What is the method for overlaying text and a hyperlink onto an image in Bootstrap?

After spending a considerable amount of time tweaking positions, z-index values, and other properties in an attempt to make Bootstrap work seamlessly on top of an image, I have arrived at what I believe is the most efficient code snippet. img { disp ...

css

Adjusting the style attributes for Material-UI Icons

I could use some assistance with changing the CSS property of MUI icons in order to assign a specific color when the icon is focused. I have implemented the icons in the header and am displaying different pages below them, so I would like to give each ac ...

cssmaterial-ui