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?
Related
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.
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.
li.disabled a {color : #808080;}
I've added the above in .css file and my expectation is to find any <li> tag with class as disabled and make the corresponding content given in ??? this tag to be displayed as gray in colour.
Example of my html would be http://pastebin.com/cnA4gqb3
This does not seem to work on browser like chrome. Can you suggest me a generic css which will work in common across all browsers?
This is probably a "importancy" issue. Some other CSS is likely to be more important to Chrome. Try adding !important or change the order of your rules.
You can use something like this :
This is used for safari and chrome basically,
`#media screen and (-webkit-min-device-pixel-ratio:0) { #u { color:green; /* Safari only */ } }
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.
So i have some html:
<a class='clicktext'>...read more!</a>
and i want to give it a :hover animation, as so:
.clicktext{
}
.clicktext:hover{
text-decoration:underline;
}
.clicktext:active{
text-decoration:none;
}
Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to
a{
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.
I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.
Has anyone bumped into this, and perhaps found a nice solution?
edit: these also do not work
.clicktext a:hover{...}
a .clicktext:hover{...}
I had these kind of problems with Firefox and solved it by adding the tag name to class name:
for example I had this which worked in Chrome but not in Firefox:
.content .sidebar:hover{
background-color: red;
}
and fixed it by making it more specific like this:
div.content div.sidebar:hover{
background-color: red;
}
http://jsfiddle.net/rE8xU/
I do not see the issue, when moused over it does include an underline.
A possible cause of this issue is the level of importance that the class has.
Such as styles that are set by their identification tag will take over any class styles and so forth.
http://htmlhelp.com/reference/css/structure.html
check out cascading order
Lastly, make sure that the css file is properly linked and or embedded
you can use firefox to check as well.
You need to add href="#" to your . the :hover meta tag needs the link to have the href property set.
use <p></p> tag if you are not hyperlinking the text.
<p class='clicktext'>...read more!</p>
then for styling the text.
p.clicktext {
color: #ccc;
}
p.clicktext:hover {
text-decoration:underline;
}
Hope i Helped ;)
There's a big chance that you have a conflict somewhere in your CSS, because the jsfiddle with this exact code works fine in Firefox 5. You might want to check for ID-selectors with the hover-pseudoclass that could possibly overrule this line of styling. Inspect it with firebug to see what css is inherited.
You might be getting this problem for
1: not specifying the class which is clicktext in your case, or.
2: object a is associated with some other class not compatible with clicktext class!
I am saying this because my website
is running perfectly without any problem, in both Chrome and Firefox!
I am using hover to produce an overlay effect! This is what I am doing:
.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}
I also think that the answer marked as "correct answer" is not correct.
I had same problem, was just not working on Firefox, quick close and restart app and was working again.
Daniel