Html Question posted in
Some basic documentation can be found here.

Html – How to change the background color of a div when I click on it

I want to change the background color of a div when I click on it using only css not JavaScript. So when I click on it it should turn red. How do I do that using css?

Tags:

2

Answers


  1. 0

    You could use a checkbox inside that div to handle the click state and use :has() pseudo-class to change the style of the div.

    div {
  width: 100px;
  aspect-ratio: 1/1;
  background: blue;
}

input[type="checkbox"] {
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}

div:has(input[type="checkbox"]:checked) {
  background: red;
}
    <div>
  <input id="checkbox" type="checkbox" />
</div>

    However, right now, the support for :has() is only at 92.79%. So alternatively, the checkbox could be before the div and use a position absolute to cover the div. Then you can to the same thing with the sibling selector:

    .wrapper {
  width: fit-content;
  position: relative;
}

.box {
  width: 100px;
  aspect-ratio: 1/1;
  background: blue;
}

input[type="checkbox"] {
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
}

input[type="checkbox"]:checked ~ .box {
  background: red;
}
    <div class="wrapper">
  <input id="checkbox" type="checkbox" />
  <div class="box"></div>
</div>
    Login or Signup to reply.
  2. 0

    Let me clarify your doubt about how to change the background color of a div when you click on it with a simple example and easy-to-follow steps:

    Step 1: Basic HTML Structure
    First, we’ll start with a basic HTML structure. Create an HTML file (e.g., index.html) and add the following code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Background Color</title>
    <style>
        /* Adding some styles for the div */
        .color-box {
            width: 200px;
            height: 200px;
            background-color: lightblue; /* Initial background color */
            margin: 20px auto; /* Center the div */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="color-box" id="colorBox">Click me!</div>
    <script src="script.js"></script>
</body>
</html>

    In this code, we have a div with the class color-box and an initial background color of light blue. The text inside the div says "Click me!".

    Step 2: Adding JavaScript
    Next, we’ll add JavaScript to handle the click event and change the background color of the div. Create a JavaScript file (e.g., script.js) and add the following code:

    const colorBox = document.getElementById('colorBox');

function changeColor() {
    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    colorBox.style.backgroundColor = randomColor;
}
colorBox.addEventListener('click', changeColor);

    In this JavaScript code:

    We select the div by its ID using document.getElementById.
    We define a function changeColor that generates a random color and sets it as the background color of the div.
    We add an event listener to the div so that when it is clicked, the changeColor function is called.

    Step 3: Putting It All Together
    Now, when you open the index.html file in your web browser, you will see the div with the text "Click me!" in the center of the page. When you click on the div, its background color will change to a random color.

    Hope you got it.✌

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search