I am trying to mask an upload input element by my usual method of setting its opacity to 0, and then overlaying it with an image (with pointer-events set to none) so that it effectively masks the input with a nicer-looking button, but when you click that area, the submit still fires.
This is all fine and happy except in Firefox, where it seems setting opacity: 0 on an element disables it?
Does anyone know a way around this?
you can use #-moz-document url-prefix() { for excluding firefox css. example like this
#-moz-document url-prefix() {
.content {
opacity: 1 !important;
}
}
Related
I want to use a custom cursor on hover for links. It works fine on Safari and Firefox, but on Chrome it jumps back to the default cursor for a millisecond, and then goes to my custom cursor.
Codepen: https://codepen.io/ford1234/pen/vwzRgJ
I've recreated the problem in Codepen but it also happens on the site I'm applying it to.
<div>
<p>Hello</p>
</div>
<style>
html {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}
a:hover {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;
}
Expected result: A transition from the circle to the triangle.
Actual result: A transition from the circle, to the default hand pointer, to the triangle.
remove ":hover" on your selector.
your selector must be;
a{
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'),
auto; }
Have you tried out a transition-duration or a transition-delay? This is used to define the duration of a specified transition. This is the length of time it will take for the targeted element to transition between two defined states.
.example {
transition-duration: 0s;
// or
transition-delay: -1s;
}
Also keep in mind that some features are only supported by certain versions of the browser.
I am looking for the way to smoothly hide html element and then remove it at all to deny any interaction with hidden elements. I change css property "opacity" from 1 to 0.00001 to do this. The problem is that element hide, but it's still on the screen and user can hover it. Is it possible to remove transparent element using display:none without JavaScript? I tried to do this with CSS attribute selectors, but it does not work.
.element[opacity^=0.00001] {
display:none;
}
http://jsfiddle.net/DkX3L/
Since you're probably already using JavaScript to hide the elements, the best method would be to use that to stop the interaction as well. But since you've asked for a CSS solution, you could use this (IE11+):
.element {
-webkit-transition: 2s;
transition: 2s;
}
.element:hover { /* .element.hidden */
opacity: 0;
pointer-events: none; /* <-- This one */
}
DEMO
Is there a way to REMOVE completely the Transparency on Toastr.js?
I tried to change the various lines on the .less files
.opacity(#opacity) {
#opacityPercent: 100; // instead of #opacity * 100;
opacity: 1; // instead of #opacity;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
and every place where it stated opacity(x) where x was not 1 but it still displays opacity.
I also tried to add the following lines on my own CSS
.toast {
opacity: 1;
}
#toast-container > div {
opacity: 1;
}
but i still get the semi opacity on div message display. On mouse over, the div color becomes full (no transparency). I'm trying to always have it full color (no transparency).
Try overriding it using !important:
.toast {
opacity: 1 !important;
}
#toast-container > div {
opacity: 1 !important;
}
You can also try "inspect element" in Chrome to see which css tag is causing the opacity.
If that doesn't work, can you perhaps provide a link to your page?
It Depends on What You Mean by "Remove"
If you don't want the mixin generating any CSS at all, but also don't want to remove all the mixin calls within the code, then just do this (comment out the code):
.opacity(#opacity) {
// #opacityPercent: #opacity * 100;
// opacity: #opacity;
//-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
//filter: ~"alpha(opacity=#{opacityPercent})";
}
The above will "do nothing." If you want some type of CSS generated (for some reason, I cannot think of why), but you do not actually want to have that code apply any opacity setting in the browser, then give it a bogus value that the browsers will ignore, something like this:
.opacity(#opacity) {
#opacityPercent: bogus;
opacity: bogus;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{opacityPercent})";
filter: ~"alpha(opacity=#{opacityPercent})";
}
You can check out that the above generates no opacity within a browser by looking at this fiddle and examining it with an inspection tool (like Firebug, etc.).
I really believe you seek the first option however.
The following works with v2.1.3
#toast-container > div {
opacity: 1;
}
With the !important flag, there would be no fadeIn and fadeOut.
First of all I have to say that I'm working on website which I can only manipulate its CSS.
So, please don't suggest me a javascript/html solution.
Here is my problem,
You can see in this jsFiddle demo, there is a basic toggle display method but it doesn't have a transitions effect on default CSS. The HTML is exactly like that, and I don't have a permission to change its HTML or javascript, I can only play with CSS.
I want to add CSS 3 Transitions effect to this toggle method.
As Jim Jeffers's answer on this question, transitions effect never works on
display: block < - > display: none
So I will always need to keep the element display block.
I tried this but it didn't work,
.infocontent {
-webkit-transition: opacity 1s ease-out;
}
div[style='display: block; '].infocontent {
opacity: 1; height: auto !important;
}
div[style='display: none; '].infocontent {
display:block !important; opacity: 0; height: 0px;
}
Why isn't it working? How can I do that?
Try to use transition on max-height instead of height.
In my CSS I have the following:
.Thing {
filter: alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
}
.Thing button {
filter: alpha(opacity=100);
opacity:1;
-moz-opacity:1.0;
}
However, the button is still .4 opacity. I then try opacity: 2 and such and it looks like I can give it less opacity but not more. Is there a way I can remove it or do I have to write multiple rules to get everything but the button?
I am testing with Firefox and Chrome.
use rgba with a rgb fallback.
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.5); /*ie6 will ignore this*/
rgba will only apply opacity to the target element.
What i've recently been doing is using the rgbapng sass/compass plugin which generates a png image to use as a fallback for browsers without rgba support.
Note: you'll still need to use an ie6 png fix for this to work.
Not a fix for the opacity issue but a possible workaround.
How about removing the button from the normal document flow and then placing back inside the .Thing
Something like this: http://jsfiddle.net/CqgkM/