In our application, users can select a 'card' by clicking on it. We use the css :active pseudo selector to present visual confirmation of their selection. This all works fine.

In case none of the options is what the user is looking for, the last card allows for the user to enter a custom value in a text box. Unfortunately, clicking inside the text box fires the parent's :active selector, making it appear like the user has already selected an option before they have even entered their text.

Here is a minimal fiddle that shows the issue:

/

As you can see from the fiddle, we have tried both event.stopPropagation() and event.preventDefault(), with no success:

body {
  background-color:#000000;
}
.card {
  background-color: #8f97a3;
  width:200px;
  height:200px;
  margin:10px;
}
.card div, .card input {
  margin:6px;
  padding:6px;
}
.card:active {
  background-color:#b9bec5;
  margin:10px 6px 10px 14px;
}

<div class="card">
  <div>1</div>
</div>
<div class="card">
  <div>2</div>  
</div>
<div class="card">
  <input type='text' onclick='event.stopPropagation();event.preventDefault();' value='pick a number'></input>
</div>

In our application, users can select a 'card' by clicking on it. We use the css :active pseudo selector to present visual confirmation of their selection. This all works fine.

In case none of the options is what the user is looking for, the last card allows for the user to enter a custom value in a text box. Unfortunately, clicking inside the text box fires the parent's :active selector, making it appear like the user has already selected an option before they have even entered their text.

Here is a minimal fiddle that shows the issue:

https://jsfiddle/nh3kazcu/2/

As you can see from the fiddle, we have tried both event.stopPropagation() and event.preventDefault(), with no success:

body {
  background-color:#000000;
}
.card {
  background-color: #8f97a3;
  width:200px;
  height:200px;
  margin:10px;
}
.card div, .card input {
  margin:6px;
  padding:6px;
}
.card:active {
  background-color:#b9bec5;
  margin:10px 6px 10px 14px;
}

<div class="card">
  <div>1</div>
</div>
<div class="card">
  <div>2</div>  
</div>
<div class="card">
  <input type='text' onclick='event.stopPropagation();event.preventDefault();' value='pick a number'></input>
</div>

How do we keep the card's selection logic, and add a simple text-box to it so the user can enter a custom value?

This seems like it should be simple, but we can't figure it out.

• javascript
• html
• css

• 1 As an aside, <input> is self-closing. – mykaf Commented Feb 4 at 22:24

3 Answers 3

You can combine some psuedo-classes to make the selector only match the element if it is active and any input descendants are not.

body {
  background-color:#000000;
}
.card {
  background-color: #8f97a3;
  width:200px;
  height:200px;
  margin:10px;
}
.card div, .card input {
  margin:6px;
  padding:6px;
}
.card:active:not(:has(input:active)) {
  background-color:#b9bec5;
  margin:10px 6px 10px 14px;
}

<div class="card">
  <div>1</div>
</div>
<div class="card">
  <div>2</div>  
</div>
<div class="card">
  <input type='text' value='pick a number'></input>
</div>

If I understand correctly, you want to style the div.card that has input, right? Have you tried the :has selector on your CSS, something like:

.card:has(input):active {
  margin:10px;
  background-color: #8f97a3;
}

More info on the :has selrctor: https://css-tricks/the-css-has-selector/

I'm not sure why you don't just remove the .card class from the last card, but if you leave that class, you can adjust your selector so that the last card (with an additional class added to it to identify it) isn't selected and used in the event handler.

Also, event handling really should not be done inline. Rather, it should be done separately in JavaScript.

See comments inline below:

// Do event binding in JavaScript, not inline with HTML

// Get a node list of all the cards, except the one with the "lastCard" class
let cards = document.querySelectorAll(".card:not(.lastCard)");

// Loop over the node list
cards.forEach(function(card){
  // Add event listener for mousedown and mouseup
  card.addEventListener("mousedown", function(evt){
    card.classList.add("cardActivate");
  });
  card.addEventListener("mouseup", function(evt){
    card.classList.remove("cardActivate");
  });  
});

body {
  background-color:#000000;
}
.card {
  background-color: #8f97a3;
  width:200px;
  height:200px;
  margin:10px;
}
.card div, .card input {
  margin:6px;
  padding:6px;
}
.cardActivate {
  background-color:#b9bec5;
  margin:10px 6px 10px 14px;
}

<div class="card">
  <div>1</div>
</div>
<div class="card">
  <div>2</div>  
</div>
<div class="card lastCard">
  <input value='pick a number'>
</div>