Is there a way to remove CSS styles from an submit button so that the default browser style is applied?
You can set the styles to the system values,
input.overridecss {
background-color: ButtonFace;
color:ButtonText;
}
jsFiddle
Here is a list of values you can override, there is probably a better list but I'm lazy.
[Edit] Here is the Specification which has been deprecated lol,
so here is the correct way I guess,
input[type=button] {
appearance:push-button; /* expected from UA defaults */
}
from Appearence
You can do something like this:
button {
padding:0;
margin:0;
border:0;
background-color:transparent;
}
Hows that?
Store styles that you're applying programatically in a CSS class. When you want to go back to default remove the class.
Well, if you dont mind to use jQuery, you can use following code to remove all styles and classes from submit buttons.
$('input[type="submit"]').removeClass();
$('input[type="submit"]').removeAttr("style");
This will remove all classes as well as inline styles, thus system default button style will be applied to your all submit buttons.
I found that because I had:
* { border: 0; padding: 0; }
etc etc.
in my code which affects submit buttons so I put this is instead:
*:not(input) { border: 0; padding: 0; } etc etc.
This seemed to fix it.
If you're DEVELOPING the site - just remove the rules from the CSS file.
If you so wanted to, you could use Javascript/JQuery to remove/reset them based on some sort of condition if thats what you're looking for, ie:
$("#myButton").css("background","");
And so on...
If you're USING the site, but didn't build it - then you can (depending on your browser - i'm looking at Firefox 4) disable all or partial CSS from rendering using the web developer toolbar options... but I don't know if you can apply that as the 'default' setting for every site you load.
Related
Is there any way to use conditional statements in CSS?
I'd say the closest thing to "IF" in CSS are media queries, such as those you can use for responsive design. With media queries, you're saying things like, "If the screen is between 440px and 660px wide, do this". Read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, and here's an example of how they look:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
That's pretty much the extent of "IF" within CSS, except to move over to SASS/SCSS (as mentioned above).
I think your best bet is to change your classes / IDs within the scripting language, and then treat each of the class/ID options in your CSS. For instance, in PHP, it might be something like:
<?php
if( A > B ){
echo '<div class="option-a">';
}
else{
echo '<div class="option-b">';
}
?>
Then your CSS can be like
.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}
No. But can you give an example what you have in mind? What condition do you want to check?
Maybe Sass or Compass are interesting for you.
Quote from Sass:
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
CSS itself doesn't have conditional statements, but here's a hack involving custom properties (a.k.a. "css variables").
In this trivial example, you want to apply a padding based on a certain condition—like an "if" statement.
:root { --is-big: 0; }
.is-big { --is-big: 1; }
.block {
padding: calc(
4rem * var(--is-big) +
1rem * (1 - var(--is-big))
);
}
So any .block that's an .is-big or that's a descendant of one will have a padding of 4rem, while all other blocks will only have 1rem. Now I call this a "trivial" example because it can be done without the hack.
.block {
padding: 1rem;
}
.is-big .block,
.block.is-big {
padding: 4rem;
}
But I will leave its applications to your imagination.
The #supports rule (92% browser support July 2017) rule can be used for conditional logic on css properties:
#supports (display: -webkit-box) {
.for_older_webkit_browser { display: -webkit-box }
}
#supports not (display: -webkit-box) {
.newer_browsers { display: flex }
}
The only conditions available in CSS are selectors and #media. Some browsers support some of the CSS 3 selectors and media queries.
You can modify an element with JavaScript to change if it matches a selector or not (e.g. by adding a new class).
I would argue that you can use if statements in CSS. Although they aren't worded as such. In the example below, I've said that if the check-box is checked I want the background changed to white. If you want to see a working example check out www.armstrongdes.com. I built this for a client. Re size your window so that the mobile navigation takes over and click the nav button. All CSS. I think it's safe to say this concept could be used for many things.
#sidebartoggler:checked + .page-wrap .hamb {
background: #fff;
}
// example set as if statement sudo code.
if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}
CSS has become a very powerful tool over the years and it has hacks for a lot of things javaScript can do
There is a hack in CSS for using conditional statements/logic.
It involves using the symbol '~'
Let me further illustrate with an example.
Let's say you want a background to slide into the page when a button is clicked. All you need to do is use a radio checkbox.
Style the label for the radio underneath the button so that when the button is pressed the checkbox is also pressed.
Then you use the code below
.checkbox:checked ~ .background{
opacity:1
width: 100%
}
This code simply states IF the checkbox is CHECKED then open up the background ELSE leave it as it is.
css files do not support conditional statements.
If you want something to look one of two ways, depending on some condition, give it a suitable class using your server side scripting language or javascript. eg
<div class="oh-yes"></div>
<div class="hell-no"></div>
There is no native IF/ELSE for CSS available. CSS preprocessors like SASS (and Compass) can help, but if you’re looking for more feature-specific if/else conditions you should give Modernizr a try. It does feature-detection and then adds classes to the HTML element to indicate which CSS3 & HTML5 features the browser supports and doesn’t support. You can then write very if/else-like CSS right in your CSS without any preprocessing, like this:
.geolocation #someElem {
/* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
/* only apply this if the browser DOES NOT support Geolocation */
}
Keep in mind that you should always progressively enhance, so rather than the above example (which illustrates the point better), you should write something more like this:
#someElem {
/* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
/* only properties as needed to overwrite the default styling */
}
Note that Modernizr does rely on JavaScript, so if JS is disabled you wouldn’t get anything. Hence the progressive enhancement approach of #someElem first, as a no-js foundation.
Changing your css file to a scss file would allow you to do the trick. An example in Angular would be to use an ngClass and your scss would look like:
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
While this feels like a bit of a hack, and may not work perfectly in all browsers, a method I have used recently combines the fact that CSS (at least in Chrome) seems to ignore invalid values set on properties, and we can set custom properties that fall back to their default value when invalid.
(Note: I haven't deeply tested this, so treat it as a hacky proof of concept/possible idea)
The following is written in SCSS, but it should work just as well in standard CSS:
.hero-image {
// CSS ignores invalid property values
// When this var is set to an image URL, the browser will ignore it
// When this var isn't set, then we will use the default fallback for the var, which is 'none'
display: var(--loading-page-background-image, none);
// This part isn't directly relevant to my 'if' example, but shows how I was actually using this custom property normally
background-image: var(--loading-page-background-image, none);
}
I'm setting the custom property from JavaScript / React, but it would likely work regardless of how you set it:
// 'true' case
const chosenLoaderUrl = "https://www.example.com/loader.png";
// 'false' case
//const chosenLoaderUrl = "";
// containerRef is just a reference to the div object, you could get this with
// jquery or however you need. Since I'm in React, I used useRef() and attached
// that to my div
containerRef.current.style.setProperty(
"--loading-page-background-image",
`url(${chosenLoaderUrl})`
);
When chosenLoaderUrl is set to my url, that url is an invalid value for the display property, so it seems to get ignored.
When chosenLoaderUrl is set to an empty value, it falls back to the default value in my var() statement, so sets display to none
I'm not sure how 'generalisable' this concept it, but figured I would add it to the other suggestions here in case it is useful to anyone.
Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display. The logic should be in your javascript and html, use javascript to dynamically apply attributes based on conditions if you really need to. Stylesheets are not the place for logic.
You can use combination of jquery and css classes i.e. I want to change a font color of certain element depending on the color of the background:
CSS:
.h3DarkMode{
color: lightgray;
}
.h3LightMode{
color: gray;
}
HTML:
<h3 class="myText">My Text Here...</h3>
JQuery:
var toggleMode = localStorage.getItem("toggleMode");
if (toggleMode == "dark"){
$(".myText").removeClass("h3LightMode").addClass("h3DarkMode");
}else{
$(".myText").removeClass("h3DarkMode").addClass("h3LightMode");
}
No you can't do if in CSS, but you can choose which style sheet you will use
Here is an example :
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
will use only for IE 6 here is the website where it is from http://www.quirksmode.org/css/condcom.html , only IE has conditional comments. Other browser do not, although there are some properties you can use for Firefox starting with -moz or for safari starting with -webkit. You can use javascript to detect which browser you're using and use javascript if for whatever actions you want to perform but that is a bad idea, since it can be disabled.
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.
I'm creating a snippet of HTML to allow others to add functionality to their web sites (it is a voting widget). I've created a snippet of HTML like this:
<div>
[implementation of my voting widget]
</div>
I spent a lot of time to get the formatting of this widget just right. It works great in a sample web page that does not import a style sheet.
When I add the widget to a page on a Drupal site, however, the imported CSS wreaks havoc with my careful formatting. I'd like my HTML snippet to ignore all CSS style sheets. Is this possible?
Regardless of whether it is possible, is there a better solution?
Instead of relying on your CSS styles not being overridden by any imported stylesheets, you should give your widget a unique id and make sure all of your styles are a derivative of that id making sure to implement any styles you don't want to be overriden (margin, padding, etc):
<div id="votify">
[implementation of my voting widget]
</div>
#votify {}
#votify ul {}
#votify div span {}
/* etc */
You could try using a reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
Of course, you don't want to overwrite the page's CSS but you can get an idea on how to reset the styles your widget uses and use your personal CSS. So something like...
#voting-widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I hope this helps.
Without using a style sheet I think you'd have to explicitly set all margins, padding, fonts, etc in the style attribute so it takes precedence over any CSS sheets that there are.
Reset your widget CSS to default values, and THEN add your formatting code. This will clear out any page styles so you can work from a clean slate.
div#widget, div#widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/* ... whatever other reset code ... */
/* ... then add your own code ... */
color: red;
}
I need a simple <hr/> in a page that extends a default one (I'm using Django template framework); in this default page, a standard and untouchable stylesheet styles HR with border:none; height:1px but I would like to reset these styles to their default values.
I tried putting {border:1px inset; height:auto;} in my page but I didn't get the same aspect as having no style at all.
Is there a method to restore the default style for a tag?
In order to make your rule apply, you'll need to ensure that you give your rule a greater specificity than the existing rule in order to override it.
For example, if the rule is this:
hr {
/* rules */
}
Then you would need to do something like this:
html hr {
/* your rules */
}
Scores are calculated by these basic rules:
elements, like div are worth one point
classes, like .comment are worth 10 points
ids, like #user123 are worth 100 points
The total score for the selector is the sum of all of its parts, so div.class is worth 11 (10 for the .class and 1 for div
(It's actually a bit more complicated than this - see this article for details - but this explanation works as a general rule)
Edit:
I just saw your comment about not knowing the defaults.
According to Firebug, an hr appears to look like this:
hr {
height: 0;
width: 100%;
border: 1px solid #808080;
margin: 8px 0;
}
You can use the tools provided in other browsers to see if they use a different set of styles, then decide for yourself which ones would be the best ones to use.
Try YUI 2 Base CSS, seems to be doing what you want. Or even YUI 3 Base CSS
There is a possibility to "restore" default styles only for a certain context
Update
Just checked - Base CSS does not include styles for hr element
The default stylesheet for HTML documents, without any overrides, is defined by the W3C. You can find the full default stylesheet here: http://www.w3.org/TR/CSS2/sample.html
Alternatively, you could use Firebug in Firefox (or any similar tool) to view the styles of an <hr /> element on a test page without any styles applied.
Sure, you need to give your styles a bigger weight; add an id to your < hr/>, or do this in CSS:
html body hr { ... your styles ... }
No. You either have to not apply the styles in the first place, or override every broken style with explicit values.
You can also give your styles more weight with the !important property. If the original is like this:
.someClass { color: red }
You can override it with this:
.someClass { color: green !important}
I wonder if there are any possibility to reset css in middle of page? I have main style, but in one area I would like to use style from tinyMCE generated source.
So in tinyMCE source are elements which in editor looks like default browsers style (or like user wants), but in other pages uses style from my main css and from it self inline style. So I get mix of both ant it looks crappy. And I have no idea how to reset main style,.. without iframes.
Thanks
You mean, have a set of CSS rules to apply to the top part of a page, and a reset set of rules apply to the rest? No way, can't be done, sorry.
My approach to stuff like this is usually to embed the problematic content in a wrapper <div class='wysiwyg_html'> and then to set specific styling instructions for that content:
.wysiwyg_html p { display: inline }
.wysiwyg_html a { text-decoration: underline }
.... and so on
If you want, you can apply a whole reset stylesheet to everything inside wysiwyg_html that way.
thats pretty easy, i will show this with the "poorman's" reset but the others (eric mayer's ect.) works the same way:
* {
padding: 0;
margin: 0;
}
div {
padding: 50px;
}
#content *{
padding: 0;
margin: 0;
}
now your div inside the #content should have the reseted padding: 0; again, because an id selector wins over an element selector, so the only thing you need to make sure is that your secound reset has a selector that outweighs the others (but dont use important!).