<div style="-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;"></div>
Above style is working fine in html, but when i used this in TinyMce editor this is not working.
Related
Here's a gif that I've screen recorded on my device where you can see the blue-box-fill that I'm talking about:
I've tried doing this:
* {
user-select: none;
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
};
button,
button:active,
button:focus {
outline: none;
};
But it doesn't do the trick of getting rid of that blue-box-fill, since it's not really a focus border or outline.
The property you're looking for is tap-highlight-color
-webkit-tap-highlight-color: transparent;
I'm guessing this is happening on iOS?
This should prevent the blue box from appearing:
-webkit-tap-highlight-color: transparent;
I think you want like this ..
button {
margin: 10px;
padding: 10px;
height: 50px;
width: 50px;
background: #0095ff;
border: none;
border-radius: 40px;
cursor: pointer;
color: white;
}
#btn2 {
outline: none;
}
<button id="btn1">Click</button>
<button id="btn2">Click</button>
<style>
*:not(.selectable){
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.selectable{
-webkit-touch-callout: auto!important;
-webkit-user-select: auto!important;
-khtml-user-select: auto!important;
-moz-user-select: auto!important;
-ms-user-select: auto!important;
user-select: auto!important;
}
</style>
How do I make everything with class="selectable" select-able? Currently nothing is select-able using the cursor.
I would have thought that !Important would override the css setting but it does not!
You don't have to add the rule .selectable.
*:not(.selectable) should be sufficient to do your functionality.
But, Universal selectors and the :not() negation don't affect specificity Reference (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types), So you need to add some element so the browser defaults can be overriden. What you can do is remove the universal selector and change it to html or body.
from
*:not(.selectable){}
to
body :not(.selectable){
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Fiddle to the same
https://jsfiddle.net/nuf7wfj4/
I'm trying to remove the following shadow from a select when it's focused:
I've set:
select {
border: none;
box-shadow: none;
-webkit-box-shadow: none;
outline: none;
-webkit-appearance:none;
-moz-appearance:none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
HTML:
<select />
But those don't work. Any suggestions?
Use the following style:
select:focus {
outline: none;
}
Or this, for all form elements:
input:focus,
select:focus,
textarea:focus {
outline: none;
}
the solution for me was:
box-shadow: none !important;
Somehow it wasn't taking the box-shadow I've set before adding !important
Now it's not showing the "glow" anymore.
Thanks for the replies anyway,
Dem
The following code has styling issue. It works well in IE10 but not in mozilla firefox version 22.0 does not support width of 20px. How could it be standardized for both browsers?
html{
font: 10pt 'Segoe UI';
color: #505050;
-moz-outline:none;
outline:none;
}
#ta{
width: 20px;
height: 385px;
float: left;
overflow: hidden;
padding: 0 0 0 1px;
border: none;
background: transparent;color: #2e2e2e;
font-family: 'Courier New';
font-weight: 100;
font-size: 20px;
letter-spacing: 3px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-khtml-user-select: none;
}
I'm working on an online eBay profit forecasting calculator here
I can't seem to get the input fields to work in safari and mobile safari. They work fine in FF & Chrome. I click into them, but nothing shows when I type. I've been searching google but can't seem to find any clues. I'm wondering if I'm missing something in the css. Here's my css for the input fields:
input {
width: 155px;
padding-left: 5px;
height: 24px;
cursor: text;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 3px;
box-shadow: inset 1px 1px 2px black;
-moz-box-shadow: inset 1px 1px 2px black;
-webkit-box-shadow: inset 1px 1px 2px black;
background-color: #F8FBEF;
}
Your problem lies in calcstyle.css here:
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I'm not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me.
EDIT
Here is a possible solution:
Select everything but your inputs...
*:not(input.field) {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
This still seems to be a problem with Safari 9.0.3 and iOS 9.2. What finally fixed it for me was to set it to text:
input, textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}