For my website I have such code:
html {
cursor: url(cursor.cur), progress !important;
}
obviously in a style rule. How do I do a rule which has a similar effect to the following one:
a:hover {
cursor: url(cursor.cur), progress !important;
}
but which actually works. It seemed to work in Safari, but it didn't work in Chrome 17.0.963.78 for Mac.
It works for me in Chrome 19.0.1061.1.dev on Mac. So it's possibly a bug in 17.0.963.78.
http://jsfiddle.net/q2yZg/ that I used for tests.
Related
I'm working on a contact form where the select inputs are designed to have white text on a black background. The desired styles are being applied correctly in every instance except when accessed via Safari or Firefox on either an iPhone or iPad.
The relevant CSS Script is as follows:
select{
-webkit-appearance: none;
color: white !important;
}
Is there a particular reason that these browsers may not be processing this style? And how would I circumnavigate it?
*edited as both Firefox and Safari express this same issue
This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.
Have you tried styling the option?
select option {
color: white;
}
I'm using the meter element to display a star rating from 0 - 5. I got it to work great on Chrome, sort of okay in Firefox, but can't quite get it to work properly in Safari.
Here is a codepen
For Safari, to properly display the styled meter, I have to add
meter {
-webkit-appearance: none;
}
And then everything works. However, once doing that, it ceases to work in Chrome because Chrome will just render the content within the meter and cease to show it completely. Has anyone gotten around this?
P.S. Also, does anyone know why I can't set it like this:
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-moz-meter-bar {
//code here
}
And instead have to break it up?
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value {
//code here
}
&::-moz-meter-bar {
// code here
}
Much appreciated if anyone has any insight :)
I can not test on Safari
But I would try the following (It works in Chrome, at least)
meter {
-webkit-appearance: none;
-webkit-appearance: meter;
}
Chrome has a built-in style of meter.
That's why when you set none it stops to work. Hopefully, Safari will understand none, won't understand meter and will keep the first style.
I have gone with a hacky way to target only Safari. This allows my styled meter to work across Firefox, Safari and Chrome. Have not managed to figure out why I need to separate the -webkit and -moz styles. Perhaps in the future when all the browsers implement the element in the same way things will be better.
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
meter:not(:root:root) {
appearance: none;
}
}
I had the same issue and this worked for me:
-webkit-appearance: meter;
-moz-appearance: none;
appearance: none;
If you set border-color: transparent for the meter element it works in Safari, don’t ask me why.
Here is a working Codepen for your example:
https://codepen.io/receter/pen/KKQmBLP
Edit: border: 0; works as well and is probably better.
Long story short, I had an app written in HTML / CSS and a little JS. It had a lot of input fields that were displaying perfectly in Chrome, IE and Firefox - white background, black text.
Then I've decided to integrate it into WordPress Page. And it works perfectly - well, until You open it in Firefox. In Chrome and IE, when it is opened as a page, everything works. In Firefox, the text is white / transparent, so it is invisible with white background...
I've browsed through few pages of Google Search on this but cannot find any resolution. Adding color: black; !important to input selector does nothing, adding style="black;" to any input field also. Any other solutions I have found do not work.
Do You have any idea how to fix this? It would be a shame to be closed to Firefox users and honestly it looks like magic to me, nothing is working...
So, after seeing comments, an example:
<input type="text" name="rozstaw" id="rozstaw" maxlength="4">
CSS:
div.eyes-tests-choose-glasses-modal #eyes-tests-choose-glasses-container input {
font-family: Roboto, sans-serif
}
Although I don't really think this is the case - standalone it works great, on WordPress it does not. That's why I think maybe linking would be better way of describing things.
It's hard to guess, but here are two shots in the dark that might help you out
First, try adding your CSS like this:
input, textarea {
color:#000 !important;
}
Alternatively, you can do the same thing only specially targeting Firefox:
#-moz-document url-prefix() {
input, textarea {
color:#000 !important;
}
}
I have recently updated chrome from version 39 to version 43.0.2357.132. Before updation the following piece of code was working just fine:
::-webkit-input-placeholder {
color: red;
}
But after updating its not working. I also tried:
input::-webkit-input-placeholder {
color: red;
}
But no luck! Any help would be appreciated. Thanks in advance!
Have you tried something like this?
Code snippets:
::i-block-chrome,
input[placeholder]::-webkit-input-placeholder {
color: red;
}
Hope this helps!!!
I had a very similar issue in my application where I could not get placeholder colors to work in Chrome, not even in 2018. All demos worked just fine for me, it just failed in my application despite following all regular advise, such as splitting declarations.
To make a long story short, this completely unrelated declaration in my stylesheet was causing placeholder colors to fail in Chrome:
input:first-line {
display: inline-block;
}
The above is a fairly common hack to harmonize line height inside input elements across browsers. You may find it in some frameworks.
Well, using it prevents you from setting custom colors for placeholders in Chrome. Does that make sense? No. But it solved it for me.
I would like to edit the chrome live CSS file (C:\Users\YourUsername\AppData\Local\GoogleChromeUser\DataDefaultUser\StyleSheetsCustom.css).
Is there a way to edit one page's css properties?
In mozilla there is a way and it works fine:
#-moz-document domain("cnn.com"),domain("bbc.com")
{
A:visited { color: #990000 ! important }
}
But this doesnt work in chrome. If I change the #-moz-document... line to #-webkit-document... it still doesent work.
Could you help me?