I would like to prevent user-selection to be possible on a Boostrap navbar, such as :
http://getbootstrap.com/examples/navbar-fixed-top/
How to stop user-selection ?
I tried user-select: none; but it fails if you do CTRL-A.
Note : I don't want to stop user to copy text on the page, but I want to provide better user experience by avoiding selection of navbar elements.
In bootstrap 4.5 and above, you can just use class="user-select-none"
You could do it like this:
Bootply - DEMO
.navbar {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
More Info:
Mozilla MDN user-select
CSS-Tricks user-select
Solution 2: Disable user selection when press CTRL+A
You could also do it by set the ::selection background color to none
Bootply - DEMO
div.navbar *::-moz-selection {
background: none !important;
}
div.navbar *::selection {
background: none !important;
}
.navbar {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
Related
This question already has answers here:
How to disable text selection highlighting
(45 answers)
Closed 1 year ago.
I can't make that code unselectable. How can I change it?
I tried placing user-select: none in all of css classes, but it's still selectable.
<div class="outer">
<a href="/">
<img src="/wp-content/themes/theme/assets/img/logo.png">
</a>
</div>
user-select is not supported in all browsers without prefix. Try this:
.outer {
user-select: none;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
}
This was answered here, I can't post it in chat yet, sorry: How to make HTML Text unselectable
Long story short:
.outer {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I am trying to disabled th cells in a html table to avoid any clicking problem but it seems that disabled property is not available for this.
focusout() on click doesn't work very well so I ask for help to find a better solution.
If you want to prevent selecting the text, use CSS property user-select: none.
.noselect{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
th{
border: 1px solid gray;
}
<table>
<tr>
<th class="noselect">You can't select this</th>
<th>You can select this</th>
</tr>
</table>
If you look at this example: http://bl.ocks.org/mbostock/4063269
When you mouseover the circle text, there is an html tooltip that pops up. Is there any way to disable this?
I thought using css would resolve the issue:
body {
font-family: Trebuchet, sans-serif;
color: black;
font-size: 14px;
font-weight: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
but no luck.
The tooltip is shown by the browser based on the title attribute. If you remove the line of JavaScript that adds this, the tooltip will no longer appear.
I would like to know if there is anything equivalent to: -webkit-appearance: none; for Firefox?
What I want to achieve:
<select ...>
<option>...</option>
<more option>
</select>
The -moz-appearance CSS property is
used in Gecko (Firefox) to display an
element using a platform-native
styling based on the operating
system's theme.
Source:
Mozilla
-moz-appearance:none with <select> still shows a dropdown arrow on Firefox.
See this bug report for more information: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
https://developer.mozilla.org/en/CSS/-moz-appearance
Try this.. It works
select{
-moz-appearance: none;
text-overflow: '';
text-indent: 0.1px;
}
Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.
Live example: http://jsfiddle.net/gaurangkathiriya/z3JTh/
If you want a select looking like a button in Firefox, use:
select { -moz-appearance: button; }
Like here: http://jsfiddle.net/SsTHA/
Try this...for me it's working on Firefox:
select {
padding: 0px 0px 0px 5px;
border-radius: 0px;
webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-appearance: none;
background: #ffffff url(../images/small-arrow-down.png) 62px 7px no-repeat;
padding: 1px 20px 1px 3px;
cursor: pointer;
border-radius: 2px;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Here is the code for Firefox, Chrome, Safari, and Internet Explorer (Internet Explorer 10 and up).
Just add a small down arrow PNG image for your select and it's all set.
My arrow is 30x30, but set it to your specifications.
.yourClass select{
overflow: none;
background-color: #ffffff;
-webkit-appearance: none;
background-image: url(../images/icons/downArrow.png);
background-repeat: no-repeat;
background-position: right;
cursor: pointer;
}
/* Fall back for Internet Explorer 10 and later */
.yourClass select::-ms-expand {
display: none;
}
I have an image being hacked in as a background image (as shown here). I've noticed that if I drag my mouse over it though, it selected the image so that it can't be deselected. I've tried the following code to no avail:
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
top:0px;
left:0px;
}
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
Any ideas?
Add this to your style sheet
.selectDisable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.selectEnable {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
Just add the class selectDisable to the element you want to prevent from being selected.
The drag effect occurs on webkit(chrome, safari, opera). It does not happen on Firefox.
Don't this apply to your whole document if you have textual content because then you won't be able to select text, which is not very user-friendly.
You could also prevent dragging by adding another empty div on top of your image with the same selectDisable class.
Here is a working example:
http://jsfiddle.net/xugy6shd/3/
draggable="false" worked for me
If you load image as div's background you can't select it.
EDIT
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
If you are using jQuery I've written a tiny jQuery plugin - wrapper that does pretty much what ppumkin wrote:
(plugin is in js part along with an example usage) http://jsfiddle.net/gryzzly/HtvB8/