I set the cursor as follow:
cursor: url(https://my.server.com/resources/cursors/cursor_select.cur), crosshair;
It works on all browsers, except Safari.
What might be the solution?
Related
Using contact forms 7 on my Wordpress site development and I noticed the buttons were different for mobile devices, so after searching I found the solution of -webkit-appearance: none; which I applied to the element input.wpcf7-form-control.wpcf7-submit.
The style has been applied because it shows up when I inspect the element, but nothing has changed on mobile devices.
Should I have applied it to a different element?
You should try this code instead :
input.wpcf7-form-control.wpcf7-submit {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Consider adding !important if it still not working.
sorry for the super late answer.
The class seems to be correct indeed.
Temani's answer is also a good suggestion for wider browser compatibility.
However, sometimes, even being supported by browser like Safari, the use of the prefixed -webkit- has no effect.
So, I'm going to give you two answers:
For the case of a submit input -your case-, you can simply give the background and border properties you want and that will overwrite the browsers default css properties. No need of the appearance property. But you will probably need to define each status of the button including :active and :hover
For Check boxes and radio buttons a workaround to the problem is hiding the input with visibility: hidden and using :before and/or :after to create an alternative check or radio which will also need a visibility: visible property. You can use the :checked:before selector to apply different appearances to each status
Note: remember :before and :after associated to an input will only work in Chrome and Safari and only together with the property appearance: none
Hope this helps
does anyone know why on webkit browsers (chrome, opera), images on hover are blinking? This case is only on second column. There is an example http://codepen.io/anon/pen/fxJAk
How can I fix it? Is it only webkit browsers bug? It works properly on firefox and even on Internet Explorer 11.
It's on chrome Version 33.0.1750.146, Opera 20.0.1387.64
The usual workaround (for WebKit) is to add:
img {
-webkit-transform: translateZ(0);
}
Updated codepen
Try add css rules for img below:
-webkit-transform:(0);
-moz-transform:(0);
-o-transform:(0);
transform:(0);
http://codepen.io/anon/pen/FpwIy
I have the following style:
.LinkActionButtonDisabled
{
cursor: default;
color: inherit;
filter: alpha(opacity=40);
opacity: 0.4;
}
this works in FF and chrome and IE10 upwards, but in IE8 and 9 the filter: alpha(opacity=40); doesn't seem to be applied. The other parts of the style are still in effect, for example the cursor defaults to the normal curosr rather than turning in to the link pointer cursor when hovering over. does anyone have any ie8 opacity issues like this?
As you've mentioned in the comments, your site is build for quirks mode. I assume the elements in question don't have layout.
To get opacity and filter (and many others) to work, your site needs to render in standards mode.
Check out Spudley's comment about switching to standards mode:
Switching from quirks mode to standards mode: easier than you'd think. Try adding * {box-sizing:border-box;} to the top of your CSS and <!DOCTYPE html> to the top of your HTML. Voila: standards mode, but with quirks mode layout. – Spudley
the spans .cursor and .cursorinner aren't displayed in opera, is there an opera specific css property I could set? is my css invalid or is this an opera bug?
i just tested this with different browsers, works in
ie 7-9
chrome
safari
firefox
doesn't work in opera tho
fiddle is here : http://jsfiddle.net/etj6z/1/
This isn't working because you're depending on 2 inline elements to have defined block dimensions. Adding display: inline-block; (or display: block;) to the cursor spans make the element display in Opera. There is an additional issue with the blinking, which is due to the same issue. You'd probably be better off using show() and hide() but otherwise you should be using display: [inline-]block; in the js also.
Issue
Using the following just simply doesn't work properly in -webkit- and -moz- browsers:
#exampleElement {
background-color: red; /* For example */
}
#exampleElement ::selection {
color: black;
background-color: white;
}
Result: WebKit- and Blink-powered browsers
In Chrome, Opera, and Safari, ::selection's background-color renders as if it was 50% alpha but the font colour is correct.
Chrome 29.0.1547.62:
Opera 15.0.1147.130:
Safari 5.34.57.2:
Result: Gecko-powered browsers
In Firefox, the entire ::selection rule is ignored. ::selection's background-color just happens to be white due to #exampleElement's dark background-color (thanks to #BoltClock for noticing that)
Firefox 22.0:
Result: Trident-powered browsers
In Internet Explorer, (would you believe) everything is rendered perfectly.
Internet Explorer 10.0.9200.16660:
Is this just a flaw of these rendering engines / browsers or are there -webkit- and -moz- alternatives that I'm unaware of?
I've saved an example of this on jsFiddle, for people to see: http://jsfiddle.net/BWGJ2/
According to quirksmode.org, -webkit-selection and -moz-selection are indeed available. I just tested it with Chrome (18) and Firefox (13) and can confirm that it works with Firefox, but I didn't have success with -webkit-selection on Chrome (it ignored it), and according to this SO question it doesn't exist (and the answer says that ::selection should also work on all browser, but doesn't for me, too).
As already metioned in this answer, Chrome forces the selection to be transparent, but you can work around this using
background:rgba(255, 255, 255, 0.99);
For more details, checkout the linked answer by tw16
Furthermore, this works for me on FF:
::selection { /* stuff */ }
::-moz-selection { /* stuff */}
But this does not:
::selection, ::-moz-selection { /* stuff */ }
But maybe this is not related to ::selection but does apply on all pseudo elements, couldn't find an answer to that.
There are browser-dependent versions. The version you're using was the standard CSS3 way, but then it got dropped from the spec. I dunno about its browser support...
And something else to consider: An ID-based CSS selector might "outweigh" a pseudoclass-based selector, resulting in the ID-based CSS always taking precedence. So try adding !important to your ::selection style to make sure it's always used when applicable.
Hope that helps!