Adding text in toggle button HTML/CSS

I possess these items.

https://i.sstatic.net/zxK1r.png

https://i.sstatic.net/uSqL3.png

I desire this.

https://i.sstatic.net/23qD3.png

https://i.sstatic.net/46w5B.png

The following code may seem daunting, but here it is:

html:

<!DOCTYPE html>
<html>
<head>
    <title>check</title>
    <link rel="stylesheet" type="text/css" href="main2.css">
</head>
<body>
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
</body>
</html>

The CSS code goes like this:

.switch {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 34px;
}

/* Hide default HTML checkbox */ .switch input {display:none;}

/* The slider */

 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 36px;
  width: 60px;
  left:0px;
  bottom: -1px;
  top: -1px;
  background-color: black;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}


input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(120px);
  -ms-transform: translateX(120px);
  transform: translateX(120px);
}

I understand that this code snippet appears lengthy, but it is quite easy to grasp. Thank you for your assistance.

htmlcss

Answer №1

.switch {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 34px;
}

 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "aaa";
  height: 36px;
  width: 60px;
  left:0px;
  bottom: -1px;
  top: -1px;
  background-color: black;
  -webkit-transition: .4s;
  transition: .4s;
}


input:checked + .slider {
  background-color: #2196F3;
}


input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(120px);
  -ms-transform: translateX(120px);
  transform: translateX(120px);
}

.text {
  color: white;
}

.text:after {
  position: absolute;
  top: 7px;
  right: 25px;
  content: "Switch off";
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
.text:before {
  position: absolute;
  top: 7px;
  left: 25px;
  content: "Switch on";
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

input + .slider + .text:after {
  opacity: 1;
}
input + .slider + .text:before {
  opacity: 0;
}


input:checked + .slider + .text:after {
  opacity: 0;
}

input:checked + .slider + .text:before {
  opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
    <title>check</title>
    <link rel="stylesheet" type="text/css" href="main2.css">
</head>
<body>
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
  <div class="text"></div>
</label>
</body>
</html>

Answer №2

If you need to see it in action, check out this jsfiddle: https://jsfiddle.net/1yymr2kx/5/

To achieve the desired effect, simply include an :after element that updates the content when the checkbox is clicked.

.slider:after {
  content:'OFF';
  position:relative;
  padding:10px;
  padding-left:100px;
}

input:checked + .slider:after {
  content: 'ON';
  padding-left:50px;
}

Answer №3

What is the most effective way to implement this using JavaScript?

Place the following code within the body:

<label class="switch">
<input type="checkbox">
<div class="slider" id='onoff' data-onoff="on" >switch off</div>
</label>

In your CSS, add these styles to the .slider class:

color:white; text-align:right;

Replace the input:checked + .slider selector with the following:

 input:checked + .slider {
 background-color: #2196F3;
 text-align:left;
  }

Embed a JavaScript file and insert this code:

var slider = document.getElementById('onoff');
slider.onclick = function () { 
var show = slider.getAttribute("data-onoff");

if(show=='on'){
slider.getElementById("content").innerHTML ="switch on";
slider.setAttribute("data-onoff","off");}


else {
slider.getElementById("content").innerHTML ="switch off";
slider.setAttribute("data-onoff","on");
 }  
   };

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

Remove the border-bottom from the footer of the datatable using R DT

I am attempting to remove the footer border from a DT:datatable in R. Upon examining this datatable, I came across this code to get rid of the border (highlighted in red) between the column names and the data: headerCallback <- c( "function(thea ...

javascriptcssrshinydt

Adaptable Image Maintains Integrity

My code is generating the following output: While I want the images to resize when dragged in, one of the right-hand images does not move below the main image as intended. Here is my code: Can anyone help me resolve this issue? Check out my CSS and HTML ...

htmlcssimageresponsive-design

Hiding and securing a div element when JavaScript is disabled

My form includes a <div>. This particular <div> is a red circle. Even when JavaScript is disabled, it remains visible (I can use display: none to address this). The issue arises when I re-enable JS - upon user interaction, the <div> mov ...

javascriptjqueryhtmlcss

The function is unable to load all items from the JavaScript data within the CSS modal

Having an issue with my js script. The function portfolioThumb is working correctly as it shows all thumbs, but the function portfolioModal only loads the first element from portfolioData. My modal uses a simple CSS with the :target pseudo-class. Everythin ...

javascriptjquerycssjson

Instead of relying on jQuery for styling, opt for CSS for a more

I came across this particular piece of code: $("#customTable tr:nth-child(odd)").addClass("newColour"); It's purpose is to apply a new color to every odd row in the table. Is there a way to achieve this using CSS alone, without relying on jQuery f ...

jquerycss

Display Loading Spinner with Bootstrap on Form Submission

This Django project features a Bootstrap spinner within a button, as seen in the code snippet below: <form method="POST" id="pdfUploadForm" enctype="multipart/form-data"> {% csrf_token %} {{ form|crispy }} <b ...

javascripthtmlcssdjangobootstrap-5

Angular error TS2339: The property 'before' is not found on type 'HTMLElement' / 'HTMLTextAreaElement' / etc

Objective: My goal is to reposition a div (containing a mat-select dropdown) ABOVE a mat-card-title when the user is accessing the site from a mobile device. If the user is not on a mobile device, the div should remain in its original position to the right ...

javascriptcssangulartypescript

Using JavaScript to Apply CSS Styles in JSF?

Is it possible to dynamically apply a CSS style to a JSF component or div using Javascript? I have been searching without any success. Below is some pseudo code: <div style="myJSStyleFunction("#{myBean.value}")"> stuff </div> The function wo ...

javascriptcssjsf

A dynamically-generated dropdown element in the DOM is being duplicated due to JavaScript manipulation

Currently, I am dynamically adding a dropdown element to the page using javascript. The goal is for this dropdown to modify the properties displayed on a map. However, when attempting to add the element after the map loads, I encounter an issue where the d ...

javascripthtml

Creating a stylish row for a table using CSS

I am attempting to create a table that is supposed to resemble the following (representing one row in the table): However, as someone new to CSS, I am encountering some strange behavior! This is the code I have written: HTML: <tr> <td> ...

htmlcss-tables

Creating a tooltip using only Javascript (displaying/dismissing on click)

I am searching for JavaScript plugins, without using jQuery, that will help me create a basic tooltip feature. What I want is to be able to click on an image and have a div appear below the image with some text inside along with a triangle in one corner. ...

javascripthtmlcssdom-eventstooltip

The closing tag for the "body" element was excluded even though OMITTAG NO was specified

While attempting to validate my contact support page, I encountered the following errors: Omission of end tag for "body", even though OMITTAG NO was specified ✉ You may have forgotten to close an element or intended to self-close an element by ending ...

javascripthtmlvalidation

What is the best way to toggle the visibility of a background image within a carousel?

As a beginner in j-query, I am struggling with creating a slider image carousel using a full background image. Most of the solutions I found online require a fixed width for all pictures to slide smoothly. However, I believe there might be a way to use an ...

jqueryhtmlcss

Changing background color on scroll using jQuery

Looking to create a cool effect where the background color of a fixed header changes as the user scrolls down a full-page block website. Managed to get it mostly working in this Pen, but struggling with determining how much has been scrolled to trigger the ...

javascriptjqueryhtmlcssscroll

The top-center alignment in Toaster (ngx-toastr) is missing a top margin

I recently started using the ngx-toastr library in my project. I have a message service that displays error messages at the top-center of the screen with the following code: @Injectable() export class MessageService { constructor(private toastrServic ...

htmlcssangulartypescriptngx-toastr

How come the position sticky content vanishes when a z-index is applied?

Can someone assist with the issue I'm having regarding the use of sticky and z-index? Whenever I apply a z-index to a positioned sticky element, its content disappears. Question: How can I utilize z-index for a positioned sticky element without any c ...

htmlcss

Implementing PHP function upon clicking an HTML button

Hey there! I'm trying to trigger the bb() function when a button is clicked. Unfortunately, the code below isn't working as expected. Can you help me out? echo "<div class ='i2' id=".$x.">"; echo "<button type='button&ap ...

phphtml

Is it possible to create a webpage layout with CSS using the flex or block properties?

This code is automatically generated HTML from a CMS and the items will be dynamic inside a ul tag. However, I require a layout similar to the image below: https://i.sstatic.net/1xnow.png * { box-sizing: border-box; } ul { list-style: none; padd ...

htmlcssflexbox

Are there any other default light colors in CSS aside from "gray"?

Seeking recommendations for background color combinations. The more suggestions, the better! Thank you :) ...

csscolors

Issue with login form in IONIC: Form only functions after page is refreshed

Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...

htmlangularformstypescriptionic-framework