Button should be select on right click

Question

I have button that has following effect by CSS

button{
  margin:10rem ;
  width:10rem
}
button#package_select:focus
{
    border: 1px solid #fbd03c    !important;
    border-radius: 5px !important;
    outline:none;
    
}

<center>
  <button id ="package_select">select</button>
 </center>

It is working fine. But Here my question is

The Button is selecting if you Right click and left click also. I want to select the button only when the user clicked on Right click on the Mouse.

How we can achieve this through Pure CSS?

This cannot be achieved with CSS. Also please note that the `center` tag has long been removed from current HTML. https://benohead.com/html5-removed-elements-tags-and-attributes/ — connexo, Aug 20 '18 at 06:13
I don't think this can be done purely in `css`. You can also fire the effect by tabbing until you reach the button — Carl Binalla, Aug 20 '18 at 06:13
https://stackoverflow.com/questions/706655/bind-event-to-right-mouse-click — Ramesh, Aug 20 '18 at 06:42

score 1 · Answer 1 · answered Aug 20 '18 at 06:23

This is not possible by CSS since you can not catch the contextmenu of the click even. So you need to use JavaScript

document.getElementById("package_select").addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
   this.className += "select_button";
    console.log("Added Button");
    return false;
}, false);

.select_button {
 border: 1px solid #fbd03c    !important;
 border-radius: 5px !important;
 outline:none;
}

<button id ="package_select">select</button>

score 0 · Answer 2 · answered Aug 20 '18 at 06:43

To simulate the focus action you have to use 2 functions

Use event.which == 3 to know if you click on right side and addClass to button with the wanted style....
Use window.addEventListener("click", function(event) to remove the focus(means to remove the class you added)

document.getElementById("package_select").onmousedown = function(event) {
    if (event.which == 3) {
        this.className += "select";
    }
}

window.addEventListener("click", function(event) {
  var elem=document.getElementsByClassName("select")[0];
  if(elem !=undefined)
     elem.className=""

});

    button{
      margin:10rem ;
      width:10rem
    }
   .select
    {
        border: 1px solid #fbd03c!important;
        border-radius: 5px!important;
        outline:none;
        
    }

<center>
      <button id ="package_select">select</button>
</center>

score 0 · Answer 3 · answered Aug 20 '18 at 06:50

You cannot do this with pure css. Need to help from javascript(but it will not guarantee, that it will work ok in all the devices).

Please check with the basic example code:

<script>
(function() {
  // The code to run on document ready;
  disable_rclick_on_btn();
})();

function disable_rclick_on_btn() {
  document.getElementById('package_select').addEventListener("contextmenu", function(e){
    e.preventDefault();
  }, false);
}
</script>

Button should be select on right click

3 Answers3