How to set CSS attributes to default values for a specific element (or prevent inheritance)

Question

Given any HTML element that is a child of another element and is automatically inheriting a series of CSS attributes: how can you set one (or all) of those attributes to the default value?

Example:

CSS:

.navigation input {
    padding: 0;
    margin: 0 30em;
}

HTML

<div class="navigation">
    Some text: <input type="text" name="one" />
    More text: <input type="text" name="two" />
    <!-- The next input, I want it to be as browser-default -->
    <div class="child">
        <input type="text" name="three">
    </div>
</div>

Here, by browser-default I mean I want it to look exactly as if no CSS at all was applied to that element.

Here I'm using an input element as an example, but I'm talking about any kind of element. I'm not asking how to set different CSS attributes to that specific element, I'm asking how to reset it to its defaults.

Different elements have different default attributes like padding when they are not set. For example, a button that has a padding of 0 in CSS will wrap its text without any space. You can later set its padding to another value, but how would you set it to the default padding?

Thanks in advance for any comments!

possible duplicate of [Reset CSS display property to default value](http://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value) — user123444555621, May 09 '13 at 09:49

score 17 · Answer 1 · answered Aug 11 '16 at 08:35

17

in your case you can use that :

.navigation input {    
    all: initial;
}

it will revert all attibutes of your input to initial value.

source : http://www.w3schools.com/cssref/css3_pr_all.asp

answered Aug 11 '16 at 08:35

C.Vergnaud

807
5
15

4

Be careful with this - it does not give you the browser's user agent stylesheet (the *default style* the OP was requesting). It gives you the [initial value](https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value) - which doesn't seem well defined to me. – thomas88wp Aug 02 '17 at 21:14
there is a slight difference if attribute is inherited or not. It should work in most of the cases, this doc is also usefull : https://developer.mozilla.org/en-US/docs/Web/CSS/initial – C.Vergnaud Aug 03 '17 at 16:11

score 7 · Answer 2 · answered Jul 10 '18 at 05:24

CSS 4 CR has a provision for the revert keyword for values. It looks like intended for the exact purpose in the question and might be used like this:

.navigation input {    
    all: revert;
}

Still its browser support is not very impressive for the time of writing...

score 3 · Accepted Answer · answered May 09 '13 at 09:36

3

If you are saying about the browser defaults than look at CSS reset stylesheets, they are all over the web, those stylesheets reset each elements properties to a standardized value.

Few Examples

Meyer Web

HTML5 Doctor (CSS Reset With HTML5 Elements Included)

If you are saying manual style resets and ignore inheritance, than until now, there's no way to reset the styles completely unless and until you re-declare their values so for example

div {
   color: red;
   font-family: Arial;
}

div p {
   /* Here it will inherit the parents child unless and 
      until you re specify properties with different values */
}

answered May 09 '13 at 09:36

Mr. Alien

147,524
33
287
271

Thanks. So you are saying it's not possible? Using Stylesheets with defaults is not reseting an element, is re-assigning attributes and somehow emulating the browser defaults, but not like a true `reset`. Or am I missing something? – Francisco Zarabozo May 09 '13 at 09:47
@FranciscoZarabozo Say you reset browser defaults, now for a single element you need browser default, so you need to create a selector and write the styles again to over ride inheritance, so in pure english, something like `.class_name {all properties=0, now below rewrite new}` is not possible – Mr. Alien May 09 '13 at 09:49
“CSS reset stylesheets” do *not* properties to default values in general. They simply set them to some values that the author of the stylesheet has decided. The default values are browser-dependent, though there is much in common across browsers. – Jukka K. Korpela May 09 '13 at 11:29

score 1 · Answer 4 · edited May 23 '17 at 12:34

You cannot set an attribute to the default value, since the defaults are browser-dependent and cannot be referred to in CSS. Cf. to How to set CSS attributes to default values for a specific element (or prevent inheritance)

On the other hand, your example sets padding and margin, which are not inherited. So the question seems to be how to prevent your own CSS rule from applying to some specific element. Then the answer is that you need to modify the selector of the rule so that the specific element does not match it. In your case, this could be done by changing the selector to

.navigation > input

But the more complicated the markup and the style sheet are, the more difficult it becomes to restrict the effects that way.

Well, I'm working with a document (not mine but assigned to me) that has `* { margin: 0; padding: 0}` as the first line in CSS, and that's affecting inputs and buttons, which are the first thing I'd like to reset. — Francisco Zarabozo, May 09 '13 at 13:21

score 0 · Answer 5 · edited Dec 21 '18 at 11:45

0

I think some of these should work:

/* Valeurs avec mot-clé */


clear: none;

clear: left;

clear: right;

clear: both;

clear: inline-start;

clear: inline-end;


/* Valeurs globales */

clear: inherit;

clear: initial;

clear: unset;

sources :

toast rm -rf/*

lmgtfy : "css3+clear" on any search engine

https://developer.mozilla.org/fr/docs/Web/CSS/clear

edited Dec 21 '18 at 11:45

Matt

1,474
4
13
27

answered Dec 21 '18 at 11:15

Hide

1
1

Stokely · Answer 6 · 2021-01-03T04:05:03.743

Every browser by default looks at a plain HTML element and assigns it its own "default" CSS formatting. The element "blockquote", for example, is usually interpreted by a browser with a standard set of CSS formatting values as follows:

blockquote  {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

However, this formatting is not always consistent between browsers. So some people have started creating "reset css sheets" with values to align all the browsers to the same formats before applying custom CSS on top of that for specific web projects. Bootstrap does this, but in doing so, they subjectively assume everyone expects elements to look like they want, which creates a mess in the case of "blockquote" which removes critical margins like so:

BOOTSTRAP 4.0 RESET for "blockquote"

blockquote  {
  margin: 0 0 1rem;
}

This Bootstrap fix that comes in all Bootstrap downloads fails as it strips the critical left-margin formatting that defines blocked quotes in scientific journals and adds one at the bottom. Older browsers don't know what "rem" is so would look differently. It isn't the custom classes in Boostrap that's the issue its these poorly designed "resets".

Mr. Alien's answer unfortunately is half-correct, because his CSS resets are also subjective like Bootstrap's and don't fully return the CSS to browser defaults but do a clean up routine to force all browsers to use a new default design like Bootstrap....not the browser's original one. This is compounded by the fact there's no true CSS reset sheet I know of that has carefully been designed to reset CSS for every browser known and all their versions. That is why its always been better for designers to NOT use these custom CSS frameworks and start from scratch. But most are so addicted to Twitter Bootstrap that it is not possible to strip that from most web projects today. Its also WAY too complicated to customize every single element manually in your own sheets as you discover them. That raises the danger of then writing over classes. Using "!important" does that, as well.

There are some tricks that will return your elements to the browser's default UA style sheet like so:

* {
    all:revert;
}

This would reset all HTML styles to their browser CSS defaults. But this trick does not work in Internet Explorer, for example.

What I recommend instead is you install an HTML reset sheet that will force all Bootstrap or other installs BACK to the original browser's defaults element by element so all the browsers have the same default. This site has some good values to use for such a sheet: https://www.w3schools.com/cssref/css_default_values.asp

score -1 · Answer 7 · answered Jul 13 '17 at 10:35

-1

You can use unset, say you want to set border color to browser default

.navigation input {
    padding: 0;
    margin: 0 30em;
    border-color: unset;
}

this will unset the style inherited from other classes.

answered Jul 13 '17 at 10:35

Manoj Samaraweera

1

How to set CSS attributes to default values for a specific element (or prevent inheritance)

7 Answers7

sources :

Linked

Related