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.
Use a child element if you realy want to keep the padding.
Demo:
http://jsfiddle.net/cpMtK/2/
Use margins on div.box instead of vertical padding.
.box {
margin:20px 0;
width: 100px;
padding: 0 40px;
}
Related
I've got a bit of an odd one here, I'm trying to stop users from being able to highlight text within a text input but the standard code below isn't working.
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
jsfiddle illustrating the issue - https://jsfiddle.net/z0L4cj3n/7/
When checking the css within the browser, "user-select: none;" is active but isn't making any difference, is there something else in my css overwriting this behaviour? I've even tried adding the above code to the specific input to no result.
Edit: adding
pointer-events: none;
is not an option as I have hover effects and jQuery events being triggered by the inputs.
Try Using
pointer-events: none;
in Css
I'm having some trouble with the margin-left CSS property. I have some nested unordered lists. This is what the list looks like with no change to the margin-left (in both IE and Chrome):
I wanted to decrease how much each list is indented so I added this CSS code:
ul li ul
{
margin-left: -25px;
}
This works fine in Chrome, which displays this:
However, IE 8 displays it like this:
I guess the origin of where the margin starts is different between the two browsers? How can I achieve the desired affect of decreasing the indentation of nested unordered lists among all browsers?
You should look into "zero-ing out" the margin and padding for ul and li's like so:
ul,li { margin: 0; padding: 0; }
As different browsers have different defaults. From there, you should be able to add your own margins and paddings as desired.
It's a good thing to use always a CSS reset. This will avoid having differences among browsers. You could use a universal reset like;
* {
margin: 0;
padding: 0;
outline: 0;
/* etc */
}
Or going a bit deeper and use Eric Meyer's one or anyone else. There are a few.
Anyway, in your case instead of play with negative margins, you should reset your margin and padding for ul and li elements:
ul, li {
margin: 0;
padding: 0;
}
I suggest http://necolas.github.io/normalize.css/ or a standard reset css stylesheet
Different browser set different default settings.
http://jsfiddle.net/gBG65/4/
In emulation of my actual project, here we have a text input within a div. The div and everything else in it must be unselectable, hence its CSS. But the form ought not to be that way, hence its CSS, yet it is anyway. Even though if I inspect the element, it inherited everything correctly and ought to be working, it is still unselectable.
This is Firefox only.
Any explanations or fixes?
div * {
-moz-user-select: -moz-none;
cursor:default;
}
input {
cursor: auto;
-moz-user-select: -moz-user-select:text;
}
If you read the docs
You can see it is -moz-none;
And to re-enable use: -moz-user-select: text;
Also remove the *...
Example
I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/
Here is an interesting CSS questions for you!
I have a textarea with a transparent background overlaying some TEXT that I'd like to use as a sort of watermark. The text is large and takes up a majority of the textarea. It looks nice, the problem is when the user clicks in the textarea it sometimes selects the watermark text instead. I want the watermark text to never be selectable. I was expecting if something was lower in the z-index it would not be selectable but browsers don't seem to care about z-index layers when selecting items. Is there a trick or way to make it so this DIV is never selectable?
I wrote a simple jQuery extension to disable selection some time back: Disabling Selection in jQuery. You can invoke it through $('.button').disableSelection();
Alternately, using CSS (cross-browser):
.button {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
The following CSS code works almost modern browser:
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
For IE, you must use JS or insert attribute in html tag.
<div id="foo" unselectable="on" class="unselectable">...</div>
Just updating aleemb's original, much-upvoted answer with a couple of additions to the css.
We've been using the following combo:
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
We got the suggestion for adding the webkit-touch entry from:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html
2015 Apr: Just updating my own answer with a variation that may come in handy. If you need to make the DIV selectable/unselectable on the fly and are willing to use Modernizr, the following works neatly in javascript:
var userSelectProp = Modernizr.prefixed('userSelect');
var specialDiv = document.querySelector('#specialDiv');
specialDiv.style[userSelectProp] = 'none';
As Johannes has already suggested, a background-image is probally the best way to achieve this in CSS alone.
A JavaScript solution would also have to affect "dragstart" to be effective across all popular browsers.
JavaScript:
<div onselectstart="return false;" ondragstart="return false;">your text</div>
jQuery:
var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
Rich
You can use pointer-events: none; in your CSS
div {
pointer-events: none;
}
Wouldn't a simple background image for the textarea suffice?
you can try this:
<div onselectstart="return false">your text</div>
WebKit browsers (ie Google Chrome and Safari) have a CSS solution similar to Mozilla's -moz-user-select:none
.no-select{
-webkit-user-select: none;
cursor:not-allowed; /*makes it even more obvious*/
}
Also in IOS if you want to get rid of gray semi-transparent overlays appearing ontouch, add css:
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
Yes, there are multiple ways.
You could simply add the user-select CSS declaration and set it to none, like this
div {
user-select: none;
}
Also you could accomplish this with the CSS ::selection selector and set the selection background color to match your own. This could get tricky.:
p::selection {
background: rgba(0, 0, 0, 0)
}
Option 1 being the best option in most cases for obvious reasons!
Use
onselectstart="return false"
it prevents copying your content.
Make sure that you set position explicitly as absolute or relative for z-index to work for selection. I had a similar issue and this solved it for me.