Chrome: Text-Only Highlighting

css, google-chrome, highlighting, text

Solution

Use a child element if you realy want to keep the padding.

Demo: http://jsfiddle.net/cpMtK/2/

Problem

I can't believe I'm asking this but, is there any way to get Chrome to function like IE when highlighting content? When simply dragging from left to right across multiple elements, Chrome seems to like highlighting partial or entire elements rather than text-only, like IE does. Here's an example: http://jsfiddle.net/cpMtK/ Chrome highlighting: IE highlighting: I've tried using: ``` -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; ``` as suggested in an SO answer here, which just disabled all highlighting. Then I looked into `user-select` and found that it has a `text` option, rather than `none`. So, I applied that but it had the same effect as `none`. I've also tried applying the `none` settings to `*` and selectively applying `text` to certain generic text tags, such as `span`, `p`, `h1`, etc, but it still behaved the same way. Is there an available CSS rule or is this just the way that Chrome works? Update I need the content to be offset with `padding` as I make extensive use of `:hover`, which vastly increases the hit-area of the element whereas `margin` doesn't.

Original source

Related problems