CODEWITHSUNDEEP
cssgoogle-chrometexthighlighting
mythofechelon
mythofechelon

Reputation: 3782

Chrome: Text-Only Highlighting

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:

enter image description here

IE highlighting:

enter image description here

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.

Upvotes: 4

Views: 428

Answers (2)

Puyol
Puyol

Reputation: 3109

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

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

Upvotes: 3

jaredhoyt
jaredhoyt

Reputation: 1575

Use margins on div.box instead of vertical padding.

.box {
    margin:20px 0;
    width: 100px;
    padding: 0 40px;
}

Upvotes: 2

Related Questions