I'm trying to create an alternate design to a site as a fallback. I can't really change how the system is architected. A main stylesheet is loaded, and a second is loaded after it. I have control over the second stylesheet. There's a lot of the CSS that I want to reset, specifically form elements.
However, I'm having difficulty with that. For example with a <button>:
background: rgb(88,222,255);
border-radius: 4px;
border: 1px solid #91d7eb;
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8);
color: #FFF;
cursor: pointer;
font-family: "Graphic-Font";
font-size: 25px;
font-weight: bold;
text-shadow: 0px 1px 3px #014b8a;
padding: 10px 40px;
While I can set background: none, border-radius: none` and so on, what happens is the button has no style, rather than the default browser style. I have to get the form elements to be the default browser style, among many other elements on the page. But I can't seem to get at least the form elements to be unstyled.
For Clarity
Simplifying the question: How does one re-style a <button> back to default?
I would suggest using a CSS reset as a starting point (Eric Meyers' is probably the most famous).
I think you're running into trouble on things where you don't want to set your own style, but return it to the browser default (e.g. you don't want margin:0; on everything, you want the default big margin on the H1, the default smaller one on the p, etc.
You can actually get copies of the user agent stylesheets, modify them to make them more specific, and include them to overwrite. Here is a site that has copies of a lot of default UA stylesheets. A problem here is that every browser uses their own, so unless you browser detect and serve selective stylesheets, it's not going to really look like it normally does for that browser. However, I think that's ok. I'd actually suggest you just pick a browser default you like and set all browsers to look like that, or you can use the W3C's suggestion for default browser styles.
All of this doesn't solve your problem though, because styling form elements is hell. As soon as you apply a style, some browsers will switch the rendering mode for the form element so you can never get it back to the original style. For example, IE7 doesn't support rounded corners, yet their default buttons have rounded corners, because it renders in Windows OS style. But as soon as you give the button a border, or some other style, it loses that nice Windows shaded rounded corner default look, and there's no way to get it back without using an image!
So really, I wouldn't shoot for trying to get browsers to go back to their native default style. I'd use a UA default stylesheet, and then modify it so make a sort of generic, cross-browser, cross-system default. It won't look like the native unstyled code, but it will look close enough.
You need to understand how CSS specificity works. You can overwrite any CSS rule, by making it more specific than other rules.
For example:
<div class="content">
<div class="wrapper"><span>Hello World</span></div>
</div>
CSS:
.content .wrapper span { ... }
.wrapper span { ... }
In this case the first declaration will overwrite the second, because it is "more specific". You can usually just go up the tree one level and specify the wrapping element or the wrapping class to override an inner element's rule. This is really handing on a lot of CMS systems, such as WordPress, where you don't have access to the main stylesheet, or just want to leave it alone and re-skin the parts you want.
Read the article, it's important.
CSS Specificity: Things You Should Know
Related
We are developing a widget that is intended to be embedded into 3rd party websites. The way it's embedded is dynamically injecting a div inside the body part of the page, using Javascript.
On a page without any or few style rules, the widget looks fine. The problem is: we are seeing various visual issues caused by the widget's style rules overriden by the web page (let's call it host page) it's on, when the host page has many CSS rules, some of which happen to trump the widget's if the widget does not define those rules explicitly (thus the widget inherits these from the host page).
It seems to me the obvious solutions to this is: define ALL CSS rules for each of the elements in the widget. When I say ALL, I mean all CSS rules like background color, etc. for all states like normal, focused. This obviously is a brutal force method, and can result in a good amount of work for just a simple widget. This doesn't really seem too smart.
So my question is: is there any clear-cut facility that allows one to prevent the host page's styles from messing around the widget's?
To give an example, let's say the host page has a CSS rule like this:
div {
border-bottom: 1px solid green;
}
This rule sets the bottom border to transparent for all div's.
Then we merrily define a whole bunch of rules in our widget, except we forget to define the border-bottom rule. In such a situation, all the div's bottom borders are green.
While it's reasonable to add a border-bottom rule for the widget to address this particular issue, the real problem is: you can't control what rules are present on the host page, therefore, in order to be really safe, you have to define ALL rules for ALL elements in the widget for ALL states, which is really cumbersome and error prone for me.
We are aware using iframe would be immune to such issues, but we prefer not to use it, and let's keep it out of the discussion.
We are also well aware of the method to use !important in CSS rules to override previous rules. But this still requires defining full CSS rules (i.e., the brutal force method). Please keep it out of the discussion too.
Thanks.
The all: initial; CSS property is what you are looking for :
The CSS all shorthand property resets all properties, apart from
unicode-bidi and direction, to their initial or inherited value. [MDN]
but it currently has low browser support.
Here is an example of how it can be used :
div div {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
background: gold;
border-bottom:5px solid green;
}
#wrap div {
all: initial;
display:block;
height:10px;
background:pink;
margin:1px;
}
<div>
<div></div>
<div></div>
</div>
<div id="wrap">
<div></div>
<div></div>
</div>
I have some thoughts on my head that involves changing the background-color of some text input fields I have. I went ahead to see if they'd look as I hoped, and this is what I saw:
First one being truly plain, second one being with the CSS styling background-color: #FFFFFF; and the last one has background-color: #FEFEFE; which you can experience yourself there: JSFiddle
It seems to be that browsers are dismissing all their pre-set styles for the input elements, as soon as I change this style property. Internet Explorer 11 even gives up on the blue glow which is normally present when a text input field is hovered (should also be on blur).
Is it possible for me to change just the background colour without causing all that?
I probably will just thoroughly style the text input fields anyway, I'm asking it out of curiosity.
I did some research about this, its something that makes me wonder what its the real behavior, unfortunately, I couldn't find any explanation to this, so I can only assume, that once you style an input, the appearance of the same, its reset to a default value, ignoring the native styles that the browser is giving to the element.
I think you probably know this already, because of your last comment, but just in case, this will help you keep the blur effect on the inputs, and at the same time, it will make them render in the same way for different browsers, you can also add height to that, to keep it even more consistent.
input
{
border:solid 1px #CCC;
background-color:#FFFFFF;
}
input:focus
{
box-shadow:0 0 3px 0 blue;
outline:none;
border:solid 1px #CCC;
}
I hope this helps!
My browser extension embeds a div item to webpages opened by browser on the fly. div contains several children items such as buttons, spans, input boxes etc.
Problem is when div is inserted to page, page's css affects the div and it's contents.
For example if the page has a css such as :
span {
text-shadow: 1px 1px 1px blue;
}
then the spans in my on the fly added div have blue text shadows. What i'm doing to fix this is to set any possible directive that might affect my div's content with !important, like
mydiv span {
text-shadow: none !important;
}
and it's rubbish.
Is there any sane way to override css for a given item, that'll take it back to browser (google-chrome) defaults?
Thanks.
Is there any sane way to reset the css to browser defaults for only a single item?
Sadly, no. The auto value will act as the default under some conditions, but not always, and you still have to specify it for every possible property. This is something about CSS that really sucks.
One idea comes to mind, though. Seeing as you're asking specifically about Chrome, if you control all the CSS classes and don't mind some clutter, you might be able to work with CSS3's not like so:
span:not(.default) {
text-shadow: 1px 1px 1px blue;
}
If you use not(.default) in every CSS rule, you can have elements that have the default behaviour if you give them the default class:
<div class="default">
I have no personal experience with CSS 3, but this should work. It will not work in older browsers, so it's not (yet) really mainstream compatible.
You cannot "reset" css rules, you have to override them (text-shadow:none;)
While some people use this reset.
* {
margin: 0;
padding: 0;
}
Is every element has default margin and padding in each browser default stylesheet( but differently)?
While eric meyer collected some most used selectors and given this to all
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Are those elements has different type of font sizes?
different baseline, different background, outline and border?
if we keep besides cons of universal selector.
is this
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
better than this
* {
margin: 0;
padding: 0;
}
You can find all default styles here: CSS2.1 User Agent Style Sheet Defaults.
If you investigate the list closely, then you'll notice that the browser-specific margins are only set for HTML-standard block elements and that nowhere a browser-specific padding is been set. In other words, the padding: 0 is superfluous. But indeed, the margin is the most disbalanced among browsers, to answer your actual question.
I am probably going to tread on someone's toes here, but in my humblest opinion using a CSS reset stylesheet is ridiculous. You would have to redefine most of those margins (and paddings) yourself anyway. You could as good just learn and keep yourself the rule to define yourself the margin (and if necessary padding) for every block element which you're going to use in the document.
As to the remnant of the reset:
The border: 0 is superflous as well. The <hr> and the most form input elements are the only elements which have a default border. Without it, the <hr> is invisible (actually, this fails in IE6/7) and the text input elements on a form with same background color are invisible as well.
The outline should certainly not be resetted, it breaks accessibility. You need to control it yourself, e.g. resetting it yourself on only links with a (background) image since that's the major reason to reset it. But still, it breaks accessibility. Rather consider giving it a different outline color or style so that it is still visible, but less disturbing.
The font-size: 100% would force you to redefine them yourself in the <h1>, <h2>, etc elements. But even without the reset, you would often already like to do that anyway. What's the point of this reset then?
The vertical-align: baseline; breaks alignment of <sub> and <sup> so that they look like <small>. Further the table headers may also be affected. Those defaults to middle in all browsers. You would need to redefine them yourself again. Plus, it is known that this reset may cause IE6/7 to go havoc with images.
The value of background: transparent; is unclear to me. I don't see any point of this reset expect that it may make IE6/7 mad. You would also need to redefine the background color for all form input elements yourself again which just adds more work (for the case they're placed in a colored container). I am sure that whenever you encounter an element which needs transparent background, you could easily spot that yourself and set it yourself.
Enfin, see what you do with this information. I don't stop you from using the CSS reset. I myself have found the CSS reset only useful >10 years back when I was just starting with HTML/CSS. But with years and years, I've learnt as well that this is plain nonsense. But I admit, it's useful for starters since the reset will force them to set the margins and other stuff themselves explicitly. Which you could do as good without the reset.
Well, 'better than this' is hard to say, but the one with more stuff does more.
outline 0 makes links not have the dotted border around them.
Border 0 makes images and such not have a border around them.
font-size: 100% probably does something like ensure the fonts are 100%.
vertical-align: baseline sets all vertical alignments to the bottom of the container,
background: transparent prevents some png problems.
but margin:0 and padding:0 are two that defiantly should not be omitted from your reset list.
The short answer is: Feel free to set all of those if you are ready to override it for any element that may need it later.
However, note that you may have a lot of work ahead of you when it comes to form elements. They require at least a border to look good, and some of them (e.g. buttons) need a padding too. Also, some browsers display a 3D-ish border around buttons by default. If you set border to 0, you will not be able to get that 3D look back using CSS.
Also, you might want to check out http://www.blueprintcss.org/. It equalises browsers quite well, it seems, though I haven't tried it myself.
I am creating a form which is validated under jQuery Validation. I want to apply a light-red background colour to inputs which are invalid and need to be corrected.
When I apply background-color: #FFCCCC; to the input, the attractive styling seems to be removed and a hard border replaces it. For example, with a text input in Firefox:
Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
(Live demo)
This occurs with several browsers. It also occurs if I set any background other than #FFFFFF.
Is there a way to preserve styling while applying a background colour?
I am open to Javascript solutions which emulate the style somehow.
Sorry - any sort of styling on input elements tends to destroy their OS/browser defaults. The default inputs are rendered in an entirely different way - it's not like they're coded into the browser as CSS styles, unfortunately.
The best thing to do here is, rather than try to make your red-background inputs emulate normal ones, create your own attractive styling! If you like those light borders, use border: 1px #ccc solid. If you like round corners, take advantage of border-radius and -moz-border-radius - for those who are on the edge of browser development, they'll have 'em. For those who aren't, they won't notice the difference.
In short, don't try to make the inputs fit in with the OS environment, but rather style them to your own site's look and feel. This will create better design for your website overall :)
I'd say the default (Windows 2000) look of the controls is easier to implement for the browser vendors. A browser has to draw everything itself, including any controls. That they look native in their default style is just a little convenience for the user but without something really fancy (and heavyweight) like WPF it quickly becomes unwieldly to draw the control correctly with visual styles of the OS and CSS applied.
The exact style is also dependent on the OS and therefore a solution giving you exactly one look might not be what most visitors of your site want. Then again, using only CSS you can achieve The One Lookâ˘. If that just happens to look like the native one on a specific OS, well, then so be it :-)
What you're looking for might probably be emulated a little by using a light-gray border and on hover/focus a light blue one, emulating the Aero look of Vista and Windows 7.
Here the browser is using its default styling.
I would suggest adding something like the following CSS to BOTH inputs, then they will look consistent.
border: solid 1px #ccc;
Short answer: no.
Browsers and form controls is without doubt the most inconsistent part of CSS. All I can suggest is to use a 1px border on input fields, as most browsers use something similar to this. CSS3 rounded corners should also work in a few browsers.
input.text {
border: 1px solid #ccc;
background-color: #fcc;
border-radius: 4px;
-moz-border-radius: 4px;
}
You will find this page at 456 Berea Street interesting. It showcases how each browser applies different styles on text boxes.
Check out what styles the normal input field is getting for border. And apply that to the error one also.
Change your HTML to be like this:
<p><input type="text" value="text" style="border:1px solid #999999;" /></p>
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p>
Edit: If you want it to look consistent across all browsers and not only slightly rounded in Mozilla then you'll have to do a lot more work. Here's a link that will show you how to completely override the textbox style.