User selects breaks between multiple items

Question

I want to disable text selection for certain elements. For instance:

p { -moz-user-select: none } span { -moz-user-select: text } 

 <div> <p>first paragraph</p> <span>first span</span> <p>second paragraph</p> <span>second span</span> </div> 

The first and second paragraphs cannot be selected individually. However, if I select the first range and drag it to select the second interval, the second paragraph will be selected in the process. I would like to prevent this (it functions as expected in WebKit).

I am using Firefox 14.0.1. JSFiddle for reference: http://jsfiddle.net/GFNDY/

Answer 1

Since the selection only “apparently” includes <p> (for example, if you copy, only non- <p> tags are saved in the clipboard), then all you have to do is make sure that the browser is not working, t its color; this can be done by overriding the default selection style using the CSS ::selection specifier ( ::-moz-selection for Mozilla).

So CSS will have something like:

 p::-moz-selection { background: transparent; color: #000000; } 

Here's a modified version of your demo that behaves as expected: Link .
Hope this helps you!