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>
Related
So first of all, thank you for reading and helping me out.
I've spent the last 4 hours on the web searching for a solution for my strange problem.
Problem
I create a <div> with (click) action. Style it with CSS classes, :hover, :active and :focus. When I click it with mouse, everything is good. But when I touch it with a touchscreen, a oddly gray overlay appears (see the linked GIFs)!!
Behaviour when mouse-clicked
Behaviour when touched
Here is a snippet like my code:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
}
#btn-container:hover {
background-color: rgb( 200,200,200 );
}
#btn-container:active {
background-color: rgb( 150,150,150 );
transition: 0s;
}
#btn-container:focus {
outline: 0;
}
.standard-btn {
padding: 12px 20px;
display: inline-block;
}
html {
/* Prevent user to select text */
-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; /* Non prefixed version: Chrome, Opera */
}
<div id="btn-container" class="standard-btn">Touch me</div>
PS: I'm developing in Angular. I've tested this strange behaviour on Chrome for Android, Safari on iOS, Chrome, Edge, IE on Windows.
The oddity is that, for example, on JSFiddle (here) or here on StackOverflow this doesn't happen. And it doesn't happen also on another Angular app of mine.... and I wasn't able to find out WHY, CSS/HTML/JS are exactly the same between the two apps. That's crazy.
Ok, solved. I'll post here the solution for future reference.
I just needed to add the property -webkit-tap-highlight-color: transparent on the main button class. As it is here described, this is not a standard property. But it worked!
Referencing to the code snippet from the question, I've modified the #btn-container class, in this way:
#btn-container {
margin: 5px;
text-decoration: none;
cursor: pointer;
float: left;
border-radius: 25px;
border: none;
transition: 0.3s;
background-color: rgb(230,230,230);
color: black;
-webkit-tap-highlight-color: transparent; /* <-- this is new */
}
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;
}
When I open the modal window, the onfocus text value in the textarea is highlighted in blue color.I'm not sure what CSS properties should be used to removed the highlighted onfocus blue color from the text . I tried the below, but it ain't working.
input[type="text"], textarea{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
An alternative to the user-select property suggested by
Marcos is to use the ::selection and ::-moz-selection (on their own rules) to specifically set/unset the color/background of the selected text (without disabling the select functionality).
input[type="text"]::selection,
textarea::selection {
background-color: inherit;
color: red;
}
input[type="text"]::-moz-selection,
textarea::-moz-selection {
background-color: inherit;
color: red;
}
input[type="text"],
textarea {
outline: none;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
<input type="text" value="test value for selection" />
<hr/>
<textarea>test text for selection</textarea>
You can use user-select to avoid the selection of any text
input {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
<input type="text">
Be careful with this, because you are avoiding to select a prompt to users, and it causes accessibility lost.
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;
}
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/