As of now, there isn't a CSS standard way to disable text selection for anchor elements that are styled to look like buttons or tabs. The -moz-user-select
property you mentioned is specific to Mozilla browsers and won't work in all browsers.
A common approach to prevent text selection on interactive elements like buttons is to use the user-select
CSS property with a value of none
. This property isn't part of any standard yet, but it is supported in most modern browsers.
Here is an example of how you can prevent text selection on anchors styled as buttons:
a.button-like {
user-select: none;
}
You can add this class to your anchor elements where you want to prevent text selection. Just keep in mind that this approach may not work in all browsers and should be used with caution.
If you want a more robust solution that works across different browsers, you may need to use JavaScript to prevent text selection. You can listen for the selectstart
and mousedown
events on the elements and prevent the default behavior to stop text selection. Here is an example using jQuery:
$(document).on('selectstart', '.button-like', function(e) {
e.preventDefault();
});
$(document).on('mousedown', '.button-like', function(e) {
e.preventDefault();
});
This way, you ensure that users cannot accidentally select the text when interacting with the button-like anchor elements.