CODEWITHSUNDEEP
javascripthtmlcss
WebDevGuy2
WebDevGuy2

Reputation: 1249

CSS effect retaining only when has focus

I have a table. Each table row has a button-group which has Yes/No/NA. It also has some textboxes, etc...

When the user clicks Yes, the button turns RED. When they click No the button is GREEN, etc.... This WORKS.The problem is when I click off the button, for example clicking into a textbox. The button loses the color. Any ideas why?

Here's part of the HTML... (the row also has some textboxes, etc)

div.btn-group>button[data-rating='Yes']:default,
div.btn-group>button[data-rating='Yes']:hover,
div.btn-group>button[data-rating='Yes']:focus,
div.btn-group>button[data-rating='Yes']:active,
div.btn-group>button[data-rating='Yes'].active {
  background-color: #00FF00;
  /*background-image: linear-gradient(to bottom, #fff 0, #00FF00 100%);*/
}
<div class="btn-group" role="group" aria-label="..." id="Rating">
  <button type="button" class="btn btn-default" data-rating="Yes">Yes</button>
  <button type="button" class="btn btn-default" data-rating="No">No</button>
  <button type="button" class="btn btn-default" data-rating="NA">N/A</button>
</div>

Upvotes: 2

Views: 53

Answers (2)

Alex
Alex

Reputation: 2780

After the button loses focus it will revert to it's previous state.

Use JavaScript to apply a class to it to keep it active:

let btnOn = document.querySelector('.btn-on');

btnOn.addEventListener('click',()=>{
    btnOn.classList.add('active');
})
.active {
    background-color: #00FF00;
}
<div class="btn-group" role="group" aria-label="..." id="Rating">
    <button type="button" class="btn btn-default btn-on" data-rating="Yes">Yes</button>
    <button type="button" class="btn btn-default" data-rating="No">No</button>
    <button type="button" class="btn btn-default" data-rating="NA">N/A</button>
</div>

Fiddle https://jsfiddle.net/d2wfqwf8/

Upvotes: 2

Marcel Schmid
Marcel Schmid

Reputation: 424

Well when you go off the button it isn´t active/focused or hovered.

You need to add a class when clicking it, and the class should make the color.

Upvotes: 1

Related Questions