Sometimes clicking isn't perfect, the mouse might move slightly and the button/elements end up with little 'selected' artifacts around them as seen here:
Of course clicking somewhere gets rid of it, but it's kind of annoying and looks crappy. Is there any way I can disable this so that the app seems more solid?
HTML/CSS:
<td id="controls">
<span id="ccw" class="menuitem"></span>
<span id="cw" class="menuitem"></span>
<span id="zin" class="menuitem"></span>
<span id="zout" class="menuitem"></span>
</td>
#cw{
background-image:url('icons/rotatecw.png');
}
#ccw{
background-image:url('icons/rotateccw.png');
}
#zin{
background-image:url('icons/zoom_in.png');
margin-top: 2px;
}
#zout{
background-image:url('icons/zoom_out.png');
margin-top: 2px;
}
.menuitem{
background-repeat:no-repeat;
width: 32px;
height: 16px;
display: inline-block;
}
In many browsers (except Opera and IE before IE10), you can use user-select with its various browser-prefixes. See MDN docu for details.
.controls {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
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 */
}
I know this kind of question was asked at least 100 times but here is what I mean by CSS only:
I want to change style of checkbox/radio with CSS without beeing required to change markup of those elements ( putting them in container / adding label element etc ). I'm asking if it's possible to style <input type"checkbox"/> without adding any new html to it.
Such CSS could be added to any exisitng page and work. All solutions I've found requires some given type of markup and if you'd just add them to some page with forms it just will not work as they might not have labels or containers for inputs itself.
By modify I mean - changing style of box (main css like border-radius, colors, borders, shadows) and changing style of check (color, shape etc).
I know required markup can be added by JS - but it's not solution, it's workaround and I'm not looking for that.
it is not cross-browser solution
input[type="checkbox"]{
width: 30px;
height: 30px;
margin: 0;
padding: 0;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
}
input[type=checkbox]:after {
content: "";
width: 30px;
height: 30px;
border: 2px solid #ccc;
margin: 0;
vertical-align: top;
display: inline-block;
border-radius: 50%;
}
input[type=checkbox]:checked:after{
background: #ccc;
}
<input type="checkbox" />
I'm trying to customize a select element with only CSS, found this:
<div class="cs_div">
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
css:
.cs_div {
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: #fafafa url("../images/select.png") no-repeat;
width: 190px;
}
.cs_div select {
margin: 0;
padding: 5px 8px;
width: 215px;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
}
.cs_div select:focus {
outline: none;
}
works great, but something on main stylesheet of site adds a "blank space" at bottom of div, in chrome, in firefox this doesn't occur.
chrome:
firefox:
already tried padding-bottom: 0; margin-bottom: 0; but not works...
here is a test site with the custom select element: http://eliterosa.bl.ee/activity/
Your question is a bit vague but you may be referring to the vertical alignment of the now inline-block div. You just need to use vertical-align: middle; to div#activity-filter-by-outer...
#activity-filter-by-outer { display: inline-block; vertical-align: middle; }
Now that you made the div an inline block it takes up line-height much like other inline elements.
See screen shot:
Just figured out a way to remove the select arrow from Firefox. The trick is
to use a mix of -prefix-appearance, text-indent and text-overflow.
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
It's pure CSS and requires no extra markup. Tested on Ubuntu and Linux,
latest versions.
Live example: http://jsfiddle.net/4WVZW/
by: Ricardo Fuhrmann
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/