Is there a way to show the comments that are generated in my css file in websinspector, I can see the comments when I view the css file in the resources tab but I dont see them in the elements styles sidebar, is this possible, this would make my life super easy.
Thanks.
Instead of /* ... */ comments, make up fake styles starting with -, e.g.
.foo {
-my-comment1: Make all foos red;
color: red;
}
These will show up in the inspector with a strike-through, since it doesn't recognize them.
Related
The following does not work for IE11 for me:
input::-ms-clear, input::-ms-reveal {
display: none;
}
Side-issue, probably not relevant: Whether I have it in or not I get the same thing, which I'm guessing is the way this works: the first time you go into password field you get the show/hide icon, change fields, go back in and the icon disappears.
any ideas how to get rid of the reveal because I have to remove it?
thanks.
adding !important to the rule fixed it. Something, somewhere must have overridden this, but there are no other -ms* entries in the imported style sheets and html (however this is tricky as it uses the truly awful GWT which seems to obfuscate and hide everything)....
input[type=text]::-ms-clear {
color: red; /* This sets the cross color as red. */
}
I'm developing a mobile app using GWT,MGWT and HTML,CSS, My view having some text fields some of the fields among them are readonly. I used css pseudo-class in my css file as follows:
input[type=text]:focus {
background-color: #FFFACD;
}
it is working fine when field is editable meaning text filed background is changing with #FFFACD when cursor pointed there, if we click/tap non-editable field the above is also effecting which I dont want to see. I even tried like below::
input[type=text]:disabled{
background-color: transparent;
}
But I'm getting nothing from above.
How can I prevent css effect on readOnly filed. I'm making filed as readonly by doing like this. tf.setReadOnly(true);. Waiting for your valuable suggestion.
thanks in advance,
You could change your selector to this:
input:not([readonly])[type=text]:focus {
background-color: #FFFACD;
}
jsfiddle
:not is well supported (except for IE < 9).
Is there a way to reset visited and unvisited link colours to the browser default after they have been changed?
In my specific situation, I have a main style file containing:
a:link { color: black; }
a:visited { color: black; }
And I would like to have a few specific links rendered with the default colours.
EDIT: Here is a jsFiddle to play with. I would like a style for the default class that makes it match the browser default.
Edit:
Another way is avoiding the problem from the beginning. Give the special links you want to be with the default style a special class (let's call it .default), and instead of:
a:link { color: black; }
a:visited { color: black; }
Use the not pseudo class and write:
a:not(.default):link { color: black; }
a:not(.default):visited { color: black; }
Notice that this pseudo class doesn't work on IE 8 and lower. For them you can use a special CSS (I don't like it, but it'll work).
It is different for each browser.
What you would have to do is get a stylesheet from the browser you are trying to reset (Gecko, WebKit, or Trident) and make that the new default.
Source: Browsers' default CSS for HTML elements
What you're looking for is revert keyword, but it's not yet implemented in most browsers, currently only Safari supports it. The links to track the development per browser are listed in the Browser compatibility section on MDN.
Some day this should work everywhere:
a { color: red; }
a.reverted { color: revert; }
red <a class="reverted" href="#">default</a> red
But for now think about a workaround. The feature is just not there yet.
If that is the only css controlling your a tags then just remove those and that will take off any styling. You could also just change the color?? Like so...
a:link {color: blue;}
a:visited {color: purple;}
Nowadays we can do something like this:
<head>
<style>
:link { color: black; }
:visited { color: black; }
.default-color :link { color: LinkText; }
.default-color :visited { color: VisitedText; }
</style></head>
<body>
<a href='#'>link</a>,
<span class='default-color'>
<a href='#'>link</a></span></body>
The second link renders with default colours.
See: CSS Color Module ยง System Colors
You can only fiddle with the URL. Browsers record the URLs they've visited. If they're rendering a page, and a particular URL appears in that list, then url is colored as "visited".
You can't force a browser to treat a URL as visited, unless they've actually been there. But you CAN make a visited URL appear as "new" by adding something different to the url, so that it APPEARS new to the browser. e.g.
example.com/foo.php
example.com/foo.php?random=value
both point at the same script, but the browser will treat both as "different". If that random value changes each time, the the browser will effectively think each time it's a brand new url and color it as "new".
I guess one question to ask here is: why? Why would you want to do that in the first place? To my knowledge, there's no W3C standard delineating what default link colors should be, anyways. A value (such as default) for color wouldn't make sense at all, seeing as that the isn't a default value.
With that being said, the most logical way to go about this would to just style things yourself. I'm not sure what situation your in, but whatever the case is, I'm pretty sure you're doing something wrong if you're asking how to restore colors to the browser default. So, before I give you a rather dry solution, I'll ask: can you give us some context? In the case that you're making something like menu bar links and you don't want the same styling for those menu bar links to leak into your normal links, you should really be using some kind of container to select those links in.
Anyways, here comes that dry solution. Most browsers use blue for links, purple for visited links, and red for active links. So, something like the following would work for browsers that go by these colors (assuming that the user hasn't modified the browsers' styling sheet, in which case you may want to learn about that or use something like initial, examined in Itay's answer).
a:link, a { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
enter code herea.class{
color:inherit;
}
Specifies that the color should be inherited from the parent element.
so if your body was color:blue; then followed by a.class{color:inherit} then those examples would be blue. at the same time, you could just use a.class:link{color:blue}. and another for when you visit the link.
Your best with just customizing classes of links of special interest and leaving the rest by default.
No, you cannot set any CSS property to the browser default if it has been changed (i.e., if there is any style sheet being applied that assigns a value to the property. This follows from basic principles of CSS.
So consider asking a different question. There are ways to limit the effect of CSS rules to specific elements, instead of e.g. preventing all links from looking like links.
Just style the ones you want to style by setting a class on them.
.class:link{}
.class:visited{}
Then leave the others default.
You can use this:
a {
color: inherit;
}
That will inherit, and as there is no other link color so the browser will give the link its own style!
I'm attempting to override the link color in a certain area of an existing theme. The links are blue on a blue background by default. I'm not sure how this theme was approved to be offered to customers, but I'm going to attempt a simple fix by making links in this area white.
Here is the markup of the area of the page with the problem:
<div id="product_details_customtab2_tab">
example
</div>
Here was one of my unsuccessful fix attempts. I tried dozens of similar things. None worked.
#product_details_customtab2_tab {link{color: white !important}}
However, the links in the area I wished to fix did not change. (There is an admin area where I can add custom CSS, so I inserted this there. I can make other styles in other areas of the theme change, so the basic functionality works, but in this specific case I don't have the details right.)
What is wrong with my CSS? Have I given enough info in this question? Thanks
UPDATE: Here's the solution that worked:
#product_details_customtab2_tab a:link{color: white}
Thank you!!!
Your selector is wrong... there is no standalone CSS "link" selector, only the ":link" selector:
http://www.w3schools.com/cssref/sel_link.asp
Also, to use CSS inheritance, you only need to separate each part of the inheritance chain with a space, not wrap it in {}. i.e., if you want to change all links inside a div with id "foo" you would do this:
#foo a { ... } /* CORRECT */
and NOT This:
#foo { a { ... } } /* WRONG */
I assume that you either wanted to do this:
#product_details_customtab2_tab a{color: white !important}
or this:
#product_details_customtab2_tab a:link{color: white !important}
Your CSS is not valid. To make a selector inside another selector, you just need a space, like:
#product_details_customtab2_tab a { color: white; }
This will select all a elements inside that div.
In IE 8, I am seeing the alt text getting displayed in the print preview when the image is not getting displayed.The issue is not occurring in chrome. I want to fix this issue in IE 8.
Src of the image gets added in run time. At some times images will not be available from the server
<img src="null" alt="weird issue">
Needed a fix without using javascript
You can't style the alt text directly, but it will inherit from the img parent so probably the easiest is to simply set the color of your img to white in the CSS (and if for print applications, then within your print styles).
Try this:
img{
color: #fff;
background-color: #fff;
}
In that example, I've also set the background-color to white but this probably isn't 100% necessary given that if this is a print style, the background will inevitably be white anyway.
As has been mentioned in the comments below this answer, you may be able to use a CSS attribute selector to only target those imgs that have 'null' as their source.
This would work like this:
img[src="null"]{
color: #fff;
background-color: #fff;
}
This would, however, come with a few additional requirements/assumptions:
That the src is indeed 'null', and not just an ampty string (in which case you could use img[src=""]).
CSS attribute selectors work in IE7 and up. However, IE7 and IE8 are a little delicate to !DOCTYPE declarations so you have to ensure that your page has a valid !DOCTYPE declared.
Older browsers (IE6, for example) will not support this, so you'll still get the alt text come through.
Assumes that a CSS resolution is actually what you're asking for, and - as before - that the background the image sits on is indeed white!
You could extend upon ths use of attribute selectors to simply ensure that those images coming through with src="null" aren't displayed at all:
img[src="null"]{
display: none;
}
For mozilla : study this code and find a way to achieve it with other browsers.
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
Or, some absolutely basic inline javascript, some verry ugly old-school inline event handler:
<img src="broken.png" onerror="this.style.display='none'" />