Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Change select option background

I want to change select option background without expand block.
If I code like "background: ‘red’", it will change all background includes of expand block.
How can I solve it?

Tags:

2

Answers


  1. 0

    To change the background color of the select options without affecting the expanded block, you can use the option selector in CSS. Here’s an example:

    select {
  background-color: red;
}

select option {
  background-color: white; /* or any other color */
}
    Login or Signup to reply.
  2. 0

    You’ll need to create a class with a name "active" or something similar, and then first remove the it class name from all nodes on click, and finally apply it to the node that you actually want.

    function onClick(id) {
  let clickedElement = null;
  const elements = document.querySelectorAll('div');
  
  elements.forEach((element) => {
  if (element.id === String(id) && !element.classList.contains('active')) {
     clickedElement = element;
  }
  
     element.classList.remove('active');
  })

  if (clickedElement) {
     clickedElement.classList.toggle('active');
  }
 }
    .container {
  background-color: red;
  margin: 4px;
}
.active {
  background-color: yellow;
}
    <div>
  <div id="1" onclick="onClick(1)" class="container">
     1
  </div>
  <div id="2" onclick="onClick(2)" class="container">
     2
  </div>
  <div id="3" onclick="onClick(3)" class="container">
     3
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search