Prevent Text Selection From Element

In my HTML I have a button located in a div:

<

Solution 1:

You can add the button text via a pseudo element either using :before or :after to disable the selection.

.my-button:before {
  content: "Close";
}

Example <buttonclass="my-button"></button>

If you need it to have a better accessibility, use .sr-only class that is built-in with Bootstrap. This works if there isn't any text after the button.

.my-button:before {
  content: "Close";
}

/* http://getbootstrap.com/css/#helper-classes-screen-readers */.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Example <buttonclass="my-button"><spanclass="sr-only">Close</span></button>

Share