CSS – Disable highlighting, selecting, dragging : Making content unselectable / undraggable

Another great code snippet. I coded an image slider and didnt like that you could highlight the arrows.. it was distracting from a clean clicking experience. This CSS3 property is useful for when you are overlaying content in layers on top of each other and highlighting a group of items would look super messy. You can disable highlighting on everything you don’t want, and allow purely for example on Captions rather than on the image in image slider or the navigation arrows.

Here is the new CSS3 user-select property, compatible with all browsers. It allows you to disable selecting / highlighting / dragging:

.unselectable {
    -webkit-user-select: none; /* Safari, Chrome */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE */
    user-select: none; /* CSS3 */
}

and according to the example on (starikovs.com/2011/01/29/css-unselectable/) you can bind it in a jQuery function

#("#testdiv").bind("mousedown", function (event) {
    $(document.body).addClass("unselectable");
    ...					
});
#(document.body).bind("mousemove", function (event) {
    /* some code */
});
#("#testdiv").bind("mouseup", function (event) {
    $(document.body).removeClass("unselectable");
    ...					
});

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

One thought on “CSS – Disable highlighting, selecting, dragging : Making content unselectable / undraggable”

  1. This is genius. Can you implement this without disabling clicking or rollover? That is to say, if I’m constructing a menu with images, can I keep them from being selected, highlighted, or dragged and still have them function as buttons with rollover?

Leave a Reply