Steps for configuring a switch to display a color at random

Question

Steps for configuring a switch to display a color at random

Looking for a way to modify colors of a basic switch

<body>
<label class="toggle">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>

    .toggle {
  --width: 80px;
  --height: calc(var(--width) / 3);

  position: relative;
  display: inline-block;
  width: var(--width);
  height: var(--height);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: var(--height);
  cursor: pointer;
 }

.toggle input {
  display: none;
 }

.toggle .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--height);
  background-color: #ccc;
  transition: all 0.4s ease-in-out;
 }

.toggle .slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--height));
  height: calc(var(--height));
  border-radius: calc(var(--height) / 2);
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-in-out;
 }

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

.toggle input:checked+.slider::before {
  transform: translateX(calc(var(--width) - var(--height)));
 }

I've been trying to figure out how to make the color change randomly every time it's clicked. Any idea or suggestion would be appreciated!

Maybe it involves altering the .enabled/disabled states or using a different programming language/library. Despite my attempts, I haven't been able to solve this yet.

javascript html css

Answer 1

Answer №1

It's not possible to achieve this effect with just HTML and CSS, but with JavaScript it can be done easily. You can listen for a click event on an element, generate a random color each time, and change the style of the element. Here is a simple example:

const checkedSlider = document.querySelector(".toggle .slider");

const randomInt = max => Math.floor(Math.random() * max);

checkbox.addEventListener("click", e => {
  if (e.target.checked) {
    const r = randomInt(256);
    const g = randomInt(256);
    const b = randomInt(256);
    checkedSlider.style.backgroundColor = `rgb(${r},${g}, ${b})`
  } else {
    checkedSlider.style.backgroundColor = "lightgray";
  }
});

Check out this JSFiddle for a live demo.

Answer 2

It's not possible to achieve this effect with just HTML and CSS, but with JavaScript it can be done easily. You can listen for a click event on an element, generate a random color each time, and change the style of the element. Here is a simple example:

const checkedSlider = document.querySelector(".toggle .slider");

const randomInt = max => Math.floor(Math.random() * max);

checkbox.addEventListener("click", e => {
  if (e.target.checked) {
    const r = randomInt(256);
    const g = randomInt(256);
    const b = randomInt(256);
    checkedSlider.style.backgroundColor = `rgb(${r},${g}, ${b})`
  } else {
    checkedSlider.style.backgroundColor = "lightgray";
  }
});

Check out this JSFiddle for a live demo.

Answer 3

Answer №2

function changeColor() {
  document.getElementById('btn').style.backgroundColor = generateRandomColor();
}


// Random color generation function sourced from:
// http://www.paulirish.com/2009/random-hex-color-code-snippets/

function generateRandomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

 .toggle {
  --width: 80px;
  --height: calc(var(--width) / 3);

  position: relative;
  display: inline-block;
  width: var(--width);
  height: var(--height);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: var(--height);
  cursor: pointer;
 }

.toggle input {
  display: none;
 }

.toggle .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--height);
  background-color: #ccc;
  transition: all 0.4s ease-in-out;
 }

.toggle .slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--height));
  height: calc(var(--height));
  border-radius: calc(var(--height) / 2);
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-in-out;
 }

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

.toggle input:checked+.slider::before {
  transform: translateX(calc(var(--width) - var(--height)));
 }

<body>
<label class="toggle">
<input type="checkbox" >
<span class="slider" id="btn" onclick="changeColor()"></span>
</label>
</body>

Answer 4

function changeColor() {
  document.getElementById('btn').style.backgroundColor = generateRandomColor();
}


// Random color generation function sourced from:
// http://www.paulirish.com/2009/random-hex-color-code-snippets/

function generateRandomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

 .toggle {
  --width: 80px;
  --height: calc(var(--width) / 3);

  position: relative;
  display: inline-block;
  width: var(--width);
  height: var(--height);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: var(--height);
  cursor: pointer;
 }

.toggle input {
  display: none;
 }

.toggle .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--height);
  background-color: #ccc;
  transition: all 0.4s ease-in-out;
 }

.toggle .slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--height));
  height: calc(var(--height));
  border-radius: calc(var(--height) / 2);
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-in-out;
 }

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

.toggle input:checked+.slider::before {
  transform: translateX(calc(var(--width) - var(--height)));
 }

<body>
<label class="toggle">
<input type="checkbox" >
<span class="slider" id="btn" onclick="changeColor()"></span>
</label>
</body>

Steps for configuring a switch to display a color at random

Answer №1

Answer №2

Similar questions

Encountering a 404 error while using Node.js for app.get requests with Postgres as the

Is there a way to execute a JavaScript file within another JavaScript file?

Unable to eliminate top padding without using universal selector

Difficulty with conflicting styles when dynamically loading components in Nuxt3

What is the best way to incorporate a dropdown header in Material-UI on a React project?

What is the reason for the malfunctioning of this button upon clicking?

creating dynamic navigation tabs with scroll functionality

Using Angular Ionic for a click event that is triggered by a specific class

Transmit JSON information from one webpage and dynamically retrieve it from another page via AJAX while both pages are active

Tips for utilizing a for loop within an array extracted from a jQuery element for automation

What is the best approach to retrieve a username from a SQL database using AJAX within a Flask application

The initial dispatch of a React hook triggers subsequent dispatches to fire multiple times

Retrieve information from subcategories in the Realtime Database using Firebase

Move the Material UI popover to the clicked icon's position

Using the filter() function in jQuery allows for efficient sorting and

Adding additional functionalities to ng-blur within the controller: A step-by-step guide

Leveraging the sibling combinator for altering the class of a sibling SVG element with the assistance of Material

Show just a single error message if there are two validation errors present

In Typescript, we can use a class to encapsulate another class and then return a generic result

Can I use JavaScript to generate an element similar to <ion-icon name="heart"></ion-icon>?