CODEWITHSUNDEEP
htmlcss
John Doah
John Doah

Reputation: 1999

Can't remove button border after click, and it's color does not change

I have virtually zero experience with HTML and CSS, and I'm trying to create a simple website. I have buttons from Bootstrap, what I'm trying to achieve is, when a button is pressed, it's text would change it's color and will have no border. This is what I tried:

.btn-secondary:active, .btn-secondary:focus { 
    color: aquamarine;
    outline: none !important;
}

But that does not work. This is the result: enter image description here

The change in color does work, but I just can't remove this grey border. I tried looking in Bootstrap docs, but couldn't find anything. Tried few different things too (such as outline-style etc.) but still, it remains the same.

Upvotes: 0

Views: 697

Answers (3)

varjod
varjod

Reputation: 150

EDIT: CSS supports focus pseudoclass but it's not supported in all browsers. In couple of years when :focus is more supported pure CSS solutions are great but in this time and place I would highly recommend to use JS.

EDIT part 2: changed let to var.

EDIT part 3: Added support for multiple buttons.

This code includes some JS. 

<style>
  button {
    border: 1px solid black;
    color: white;
    font-size: 18px;
  }

  .buttonClicked {
    border: 0;
  }
</style>

<script>
  var clickedButtons = [];
  function onButtonClick(buttonsId) {
    var button = document.getElementById(buttonsId);
    if (clickedButtons.includes(buttonsId)) {
      button.className = '';
      clickedButtons.splice(clickedButtons.indexOf(buttonsId), 1);
    } else {
      button.className = 'buttonClicked';
      clickedButtons.push(buttonsId);
    }
  }
</script>

<button id="button1" onclick="onButtonClick('button1')">
  Button 1
</button>
<button id="button2" onclick="onButtonClick('button2')">
  Button 2
</button>
<button id="button3" onclick="onButtonClick('button3')">
  Button 3
</button>
<button id="button4" onclick="onButtonClick('button4')">
  Button 4
</button>

Upvotes: 0

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

Try border style like below code -

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover { 
    color: aquamarine;
    border: 0 !important;
}

Upvotes: 1

nitnjain
nitnjain

Reputation: 611

You can use:

.btn-secondary:active, .btn-secondary:focus { 
    color: aquamarine;
    outline: 0;
    -moz-outline-style: none;
}

Upvotes: 0

Related Questions