how to Unstyle html element? [duplicate] - javascript

Is there a CSS rule available that will remove any styles previously set in the stylesheet for a particular element?
A good use example might be in a mobile-first RWD site where much of the styling used for a particular element in the small-screen views needs 'resetting' or removing for the same element in the desktop view.
A CSS rule that could achieve something like:
.element {
all: none;
}
Example usage:
/* mobile first */
.element {
margin: 0 10;
transform: translate3d(0, 0, 0);
z-index: 50;
display: block;
etc..
etc..
}
#media only screen and (min-width: 980px) {
.element {
all: none;
}
}
So we could quickly remove or re-set styling without having to declare every property.

The CSS property all has a keyword initial that sets the CSS property to the initial value as defined in the spec. The all keyword has broad browser support except for the IE and Opera Mini families.
/* basic modern patch */
#reset-this-root {
all: unset;
}
or
#reset-this-root {
all: initial;
}
Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:
.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
/* basic modern patch */
all: initial;
all: unset;
}
Relevant GitHub repo with a December 2017 more exhaustive list
Related
Related from MDN
Related W3C specs
With all this said, I don't think a CSS reset is something feasible unless we end up with only one web browser, if the 'default' is set by browser in the end.

The all property does this, and works like this:
CSS:
#someselector {
all: initial;
}
#someselector * {
all: unset
}
SCSS:
#someselector {
all: initial;
* {
all: unset;
}
}
Works in all major browsers that are still supported. Does not work in Internet Explorer, if you still have to maintain that.

Use all: revert or all: unset.
From MDN:
The revert keyword works exactly the same as unset in many cases. The
only difference is for properties that have values set by the browser
or by custom stylesheets created by users (set on the browser side).
You need "A CSS rule available that would remove any styles previously set in the stylesheet for a particular element."
So, if the element have a class name like remove-all-styles:
HTML:
<div class="remove-all-styles other-classe another-class">
<!-- content -->
<p class="text-red other-some-styles"> My text </p>
</div>
With CSS:
.remove-all-styles {
all: revert;
}
This will reset all styles applied by other-class, another-class and all other inherited and applied styles to that div.
Or in your case:
/* mobile first */
.element {
margin: 0 10;
transform: translate3d(0, 0, 0);
z-index: 50;
display: block;
etc..
etc..
}
#media only screen and (min-width: 980px) {
.element {
all: revert;
}
}
Will do.
If we want to isolate embedded widgets/components from the styles of the page that contains them, we could write:
.isolated-component {
all: revert;
}
Which will reverts all author styles (i.e. developer CSS) to user styles (styles which the user of our website sets - the less likely scenario) or to user-agent styles itself if no user styles set.

The quick answer is use "all:revert"
.element {
all:revert;
}
all:revert will RESET all the style properties on your element back to the original browser default UA style sheet property values, or whatever is styled in the parent body element. But it will not ERASE style properties like initial, returning them to a completely unstyled state.
In the case of text or inherited properties, "revert" resets your element's CSS property back to its inherited values coming from your "body" element or the browser's default UA style value, not to the property’s base style. For a non-inherited property, it resets it back again to the browser's UA default style sheet and not to the property’s base style. "all" allows all properties to be affected. This is likely what you want to see.
Problems Using "all:revert"
"all:revert" is a newer CSS declaration that only works in more modern HTML5 browsers (post-2015), and even then has very poor support in certain modern browsers like Internet Explorer 1-11, Edge Trident, and some mobile browsers. None of the older, non-HTML5 browsers (pre-2010) will understand this declaration, so it will be ignored by a wide range of browsers, old and new. (See my mixed CSS solution down below that has fixes for Internet Explorer).
Problems Using "initial" and "unset"
You can use "initial" or "unset" but you have to manually apply them for each property, and what is even worse, they will not return properties to the element's default display values as set by each browser's default UA style sheet, but "initial" will essentially erase the element's property values and create a completely unstyled element. For example, "display:block" on block level elements will be erased. Because the style property still needs a default value of some kind all block and non-block level elements with "display" will be changed to "display:inline" when you use "display:initial". You do not want to ever do this as it erases your styles AND the browser's default UA element styles from the selected element completely.
"unset" works close to the same, but in the case of inherited text-based CSS properties its properties inherit whatever is in the parents above the element (could be the browsers default UA style or whatever is in the HTML parent above), but for non-inherited properties works like "initial".
My recommendation is AVOID using all:initial or any form of initial in CSS unless you are trying to erase an individual CSS property you cannot erase in any other way. Why? initial erases not just the styles you applied but all styles the browsers default UA style sheet applied. all:revert will not do this. In terms of using initial, it does have better support in Internet Explorer, as does its cousin, inherit. But only IE8+ understands initial. So, there are a wide range of problems with this property value. It is not reliable.
The reason CSS works this way is all HTML elements come without any styling until the browser applies a default user-agent style sheet that gives all the HTML elements a base style. All HTML elements really have NO STYLES, and other than "replaced" elements like textarea and buttons, look alike until each browser's default UA sheet is applied. "initial" and "unset" would wipe away most of that from the browser. "revert" at least preserves their basic style set applied by the user's browser, and is therefore superior to "initial" and "unset". You can review all the various default style sheets that come with browsers in the link below.
A LIST OF DEFAULT BROWSER STYLE SHEETS:
https://meiert.com/en/blog/user-agent-style-sheets/
NOW FOR AN EVEN BETTER SOLUTION
There are two ideas here being confused:
The first idea is about "returning" styles back to a browser's UA style sheet value set (the style sheet that comes with the browser on install that defines what each element looks like). Each browser defines its own styles as to how elements should look by default. This idea is about returning all page styles back to each browsers native element styles.
The second idea is about "resetting" all default browser styles to a common look and feel shared by all browsers. People build special "reset" sheets to try and align all the browser elements to a common agreed on style, universally. This has nothing to do with a browsers default UA styles and more about "cleaning up" and aligning all browsers to a common base style. This is an additive process only.
Those are two very different concepts people here are confusing.
Because each browser often had default, out-of-the-box element and layout styles that looked slightly different, people came up with the idea of the "reset" or "reboot" style sheet to align all the browsers BEFORE applying custom CSS. Bootstrap now does this, for example. But that had nothing to do with people wanting to return to the browser's default look and feel.
The problem was not the building of these custom "reset" style sheets, it is figuring out what the default CSS was for each browser and each element BEFORE any styles were applied. Most found out you cant rebuild an existing clean cascade until you "clear out" all styles already applied. But how to get back to the default browser styling?
For some this meant going beyond returning the elements to the browsers UA style sheet that comes with the browser. Many wanted to reset back to "initial" property values which has NOTHING to do with the browser's default style, but really the properties defaults. This is dangerous as in the case of "display" pushes block level elements back to "inline" and breaks table layouts and other things.
So I do NOT agree with users here using "initial" to reset anything or custom reset classes that change every property back to some arbitrary base value set.
A better solution to me has always been to attempt to try and return all core element styling back to the browser's UA style sheet values, which is what all our end-users are using anyway. If you are creating a new website, you don't have to do this. You start with the browser's default styles and style over them. Its only after you've added third-party CSS products, or found yourself with complicated CSS cascades, that you want to figure out how to return to the browser default style sheet values.
For this reason, I'm for creating your own "reset" sheet to reset all the elements to one common style first that's shared by all old and new browsers as a first step. You then have a solid framework that's much easier to revert to without going back to the browser defaults. You are simply building on a reset common core set of element style values. Once build your own "reset" sheet, one that ADDS not ALTERS the browsers UA styles, you have a site that's very easy to modify.
The only problem remaining then is when you have a site that does NOT have such a reset sheet, or have that complex third party CSS and need to try and return to the browser UA styles. How do you do that?
I realize Internet Explorer has forced us too manually reset every property to get back to any sort of reset. But pushing those property values all back to "initial" destroys the browser UA style sheet values completely! BAD IDEA! A better way is to simply use "all:revert" for non-IE browsers on every element using a wildcard, and "inherit" only for a handful of inherited root-level properties found in the "html" and "body" elements that affect all inheriting children in the page. (see below). I'm NOT for these huge resets of properties using "initial" or going back to some imaginary standard we assume all browsers or IE will use. For starters "initial" has poor support in IE and doesn't reset values to element defaults, only property defaults. But its also pointless if you are going to create a reset sheet to align all elements to a common style. In that case its pointless to clear out styles and start over.
So here is my simple solution that in most cases does enough to reset what text-based values sift down into IE from the root and use "all:revert" for all non-IE browsers to force non-inherited values back to the browser's UA style sheet completely, giving you a true restart. This does not interfere with higher level classes and styles layered over your element styles, which should always be the goal anyway. Its why I'm NOT for these custom reset classes which is tedious and unnecessary and doesn't return the element to its browser UA style anyway. Notice the slightly more selective selectors below which would write over, for example, Bootstrap's "reboot" style values, returning them to the browser default styles. These would not reset element styles on elements for IE, of course, but for non-IE browsers and most inheritable text styling it would return elements in most agents to the UA style sheets that come with browsers:
:root, html {
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-text-size-adjust: inherit;
-webkit-tap-highlight-color: inherit;
all: revert;
}
html body {
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: inherit;
padding: inherit;
color: inherit;
text-align: inherit;
background-color: inherit;
background: inherit;
all: revert;
}
/* This rule attempts to manually reset all elements back to the
UA browser style sheet using "revert" and the "wildcard" (*)
which resets all properties on all HTML elements.
This would overwrite most of Bootstraps "reboot" styles
on elements, for example.
Note: This selector should be ignored by IE. */
html body * {
all: revert;
}
You can also use my free Universal CSS Framework which implements revert in it's reset style sheets.

The Problem
You need to insert markup into an HTML document, and it needs to look a specific way. Furthermore, you do not own this document, so you cannot change existing style rules. You have no idea what the style sheets could be, or what they may change to.
Use cases for this are when you are providing a displayable component for unknown 3rd party websites to use. Examples of this would be:
An ad tag
Building a browser extension that inserts content
Any type of widget
Simplest Fix
Put everything in an iframe. This has it's own set of limitations:
Cross Domain limitations: Your content will not have access to the original document at all. You cannot overlay content, modify the DOM, etc.
Display Limitations: Your content is locked inside of a rectangle.
If your content can fit into a box, you can get around problem #1 by having your content write an iframe and explicitly set the content, thus skirting around the issue, since the iframe and document will share the same domain.
CSS Solution
The best you can do is explicitly override all possible properties that can be overridden, and override them to what you think their default value should be.
Even when you override, there is no way to ensure a more targeted CSS rule won't override yours. The best you can do here is to have your override rules target as specifically as possible and hope the parent document doesn't accidentally best it: use an obscure or random ID on your content's parent element, and use !important on all property value definitions.

another ways:
1) include the css code(file) of Yahoo CSS reset and then put everything inside this DIV:
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
2) or use
https://cssreset.com/scripts/vanilla-css-un-reset/
https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
https://cssreset.com/scripts/eric-meyer-reset-css/
https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
https://cssreset.com/scripts/normalize-css/

If you happen to be using sass in a build system, one way to do this that will work in all the major browsers is to wrap all your style imports with a :not() selector like so...
:not(.disable-all-styles) {
#import 'my-sass-file';
#import 'my-other-sass-file';
}
Then you can use the disable class on a container and the sub-content won't have any of your styles.
<div class="disable-all-styles">
<p>Nothing in this div is affected by my sass styles.</p>
</div>
Of course all your styles will now be prepended with the :not() selector, so it's a little fugly, but works well.

I do not recommend using the answer that has been marked as correct here. It is a huge blob of CSS which tries to cover everything.
I would suggest that you evaluate how to remove the style from an element on a per case basis.
Lets say for SEO purposes you need to include an H1 on a page which has no actual heading in the design. You might want to make the nav link of that page an H1 but ofcourse you do not want that navigation link to display as a giant H1 on the page.
What you should do is wrap that element in an h1 tag and inspect it. See what CSS styles are being applied specifically to the h1 element.
Lets say I see the following styles applied to the element.
//bootstrap.min.css:1
h1 {
font-size: 65px;
font-family: 'rubikbold'!important;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
}
//bootstrap.min.css:1
h1, .h1 {
font-size: 36px;
}
//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
//bootstrap.min.css:1
h1 {
margin: .67em 0;
font-size: 2em;
}
//user agent stylesheet
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
Now you need to pin point the exact style which are applied to the H1 and unset them in a css class. This would look something like the following:
.no-style-h1 {
font-size: unset !important;
font-family: unset !important;
font-weight: unset !important;
font-style: unset !important;
text-transform: unset !important;
margin-top: unset !important;
margin-bottom: unset !important;
line-height: unset !important;
color: unset !important;
margin: unset !important;
display: unset !important;
-webkit-margin-before: unset !important;
-webkit-margin-after: unset !important;
-webkit-margin-start: unset !important;
-webkit-margin-end: unset !important;
}
This is much cleaner and does not just dump a random blob of code into your css which you don't know what it's actually doing.
Now you can add this class to your h1
<h1 class="no-style-h1">
Title
</h1>

In my specific scenario i wanted to skip applying common styles to a specific part of the page, better illustrated like this:
<body class='common-styles'>
<div id='header'>Wants common styles</div>
<div id='container'>Does NOT want common styles</div>
<div id='footer'>Wants common styles</div>
</body>
After messing with CSS reset which didn't bring much success (mainly because of rules precedence and complex stylesheet hierarchy), brought up ubiquitous jQuery to the rescue, which did the job very quickly and reasonably dirty:
$(function() {
$('body').removeClass('common-styles');
$('#header,#footer').addClass('common-styles');
});
(Now tell how evil it is to use JS to deal with CSS :-) )

If anyone is coming here looking for an answer that utilizes iframe here it is
<iframe srcdoc="<html><body>your-html-here</body></html>" />
https://caniuse.com/iframe-srcdoc

You mentioned mobile-first sites... For a responsive design, it's certainly possible to override small-screen styles with large-screen styles. But you might not need to.
Try this:
.thisClass {
/* Rules for all window sizes. */
}
#media all and (max-width: 480px) {
.thisClass {
/* Rules for only small browser windows. */
}
}
#media all and (min-width: 481px) and (max-width: 960px) {
.thisClass {
/* Rules for only medium browser windows. */
}
}
#media all and (min-width: 961px) {
.thisClass {
/* Rules for only large browser windows. */
}
}
Those media queries don't overlap, so their rules don't override each other. This makes it easier to maintain each set of styles separately.

For those of you trying to figure out how to actually remove the styling from the element only, without removing the css from the files, this solution works with jquery:
$('.selector').removeAttr('style');

BETTER SOLUTION
Download "copy/paste" stylesheet‎ to reset css properties to default (UA style):
https://github.com/monmomo04/resetCss.git
Thanks#Milche Patern!
I was really looking for reset/default style properties value. My first try was to copy the computed value from the browser Dev tool of the root(html) element. But as it computed, it would have looked/worked different on every system.
For those who encounter a browser crash when trying to use the asterisk * to reset the style of the children elements, and as I knew it didn't work for you, I have replaced the asterisk "*" with all the HTML tags name instead. The browser didn't crash; I am on Chrome Version 46.0.2490.71 m.
At last, it's good to mention that those properties will reset the style to the default style of topest root element but not to the initial value for each HTML element. ‎So to correct this, I have taken the "user-agent" styles of webkit based browser and implemented it under the "reset-this" class.
Useful link:
Download "copy/paste" stylesheet‎ to reset css properties to default (UA style):
https://github.com/monmomo04/resetCss.git
User-agent style:
Browsers' default CSS for HTML elements
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Css specifity (pay attention to specifity) :
https://css-tricks.com/specifics-on-css-specificity/
https://github.com/monmomo04/resetCss.git

if you set your CSS within classes,
you can easly remove them using jQuery removeClass() Method.
The code below removes .element class:
<div class="element">source</div>
<div class="destination">destination</div>
  <script>
$(".element").removeClass();
</script>
If no parameter is specified, this method will remove
ALL class names from the selected elements.

I was using Material-Tailwind for my project and was struggling to remove the default css of an element. SO I simply added style={{all: "revert"}} as the attribute in my jsx and it worked for me.

As other answers have mentioned, the CSS property all set to the value unset seems to override all CSS properties without knowing which properties are in play. However, this did not work for me while adding custom CSS in a Wordpress site, as the all property was not recognized by the Wordpress custom CSS editor, and did not reflect changes in Microsoft Edge. Instead, what worked for me was a brute-force override, that is, to identify every property used in the webpage element and manually reset each one of them. The way to identify the CSS properties being used by an element is to inspect the element with your web browser, and go through the 'Styles' tab.

Any chance you're looking for the !important rule? It doesn't undo all declarations but it provides a way to override them.
When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity.
https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception

Related

HTML input font-size is greater when defined as inherit

I am using Chrome and default font size is 16px as default.
I have an idea to adjust font-size according to screen width via media queries.
I saw some CSS experts adjusting default 16px font size to 1.6rem based system.
So idea behind scence is to equalize 1rem to 10px and use everything as rem then if needed to adjust something change only font-size so all measurements will change at same ratio.
See this example
* {
font-size: inherit;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>Hello</p>
<input type="text" value="Hello">
Can anybody explain why font-size in input is greater than p ?
Also if I try to obtain font-size in dev tools I can't get any value.
If I try to get it via JavaScript like this
document.getElementsByTagName("input")[0].style.fontSize
I get ''
You get a null result on looking at the style because the inline style has not been set.
The two Hellos are not different font sizes - both are 16px, but the paragraph is Times New Roman and the input it Arial - set by the default within the browser, at least on my inspection in Chrome/Edge on Windows10.
It is worth using your browser's inspect facility to see exactly what is setting each of the styles, and it will show you the computed style as well.

Height of "input" with "white-space:pre-wrap" in Firefox Android is bigger than Chrome in Android

Please take a look at the following simplified version of this bug:
.wrap {
white-space: pre-wrap;
}
<div>
<input type="date" class="wrap">
</div>
If you open this code it Firefox Android (latest version), you could see that the height is bigger than what it is in Chrome.
The problem is because of "white-space: pre-wrap". I don't know why it cause the height to be bigger. Could someone explain it to me and a possible solution or alternative for it. By the way, I don't want to set a fixed height for my input.
It seems you found an interesting bug in Firefox.
A. First of all a suggested(!) solution
SIMPLY: Don't use whitespace: pre-wrap to <input type="date"> or <input type="time">. You still do not need this ... and obviously the browser developer don't expect anyone doing so that that behavior has not been not found yet by the developers.
It is really hard to imagine any reason or scenario why the property whitespace: pre-wrap needed to be used to that element. The date do not flow to next line on its own.
B. The background (the why you asked for)
Elements with included functionality like date-/time-picker have additional hidden inner elements. For <input type="date" the normally not seen structure is as follow:
<div id="input-box-wrapper" class="datetime-input-box-wrapper">
<span id="edit-wrapper" class="datetime-input-edit-wrapper"></span>
<button id="reset-button" class="datetime-reset-button"></button>
</div>
// you can see this normally hidden structure in Firefox using the developer tools
// when 'white-space: pre-wrap' is set to the element ...
The CSS for that elements is placed in the browser integrated styles you normally cannot access/overwrite by css/js. Especially it is not possible in Firefox as there is no by the developers intendend way to remove the date/time behavior in Firefox at all.
If you don't want to use the browser integrated mechanic in firefox use a text field and add a date picker extension i.e. by jQuery. (Could be a workarround for you as well!?)
As further information here is the browser integrated CSS for the integrated hidden elements:
// file: datetimebox.css
// you may have a look on them using Firefox dev tools as well
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#namespace url("http://www.w3.org/1999/xhtml");
#namespace svg url("http://www.w3.org/2000/svg");
.datetimebox {
display: flex;
/* TODO: Enable selection once bug 1455893 is fixed */
user-select: none;
}
.datetime-input-box-wrapper {
display: inline-flex;
flex: 1;
background-color: inherit;
min-width: 0;
justify-content: space-between;
align-items: center;
}
.datetime-input-edit-wrapper {
overflow: hidden;
white-space: nowrap;
flex-grow: 1;
}
.datetime-edit-field {
display: inline;
text-align: center;
padding: 1px 3px;
border: 0;
margin: 0;
ime-mode: disabled;
outline: none;
}
.datetime-edit-field:not([disabled="true"]):focus {
background-color: Highlight;
color: HighlightText;
outline: none;
}
.datetime-edit-field[disabled="true"],
.datetime-edit-field[readonly="true"] {
user-select: none;
}
.datetime-reset-button {
color: inherit;
fill: currentColor;
opacity: .5;
background-color: transparent;
border: none;
flex: none;
padding-inline: 2px;
}
svg|svg.datetime-reset-button-svg {
pointer-events: none;
}
Bringing all together:
The real problem is the integrated element .datetime-reset-button. Prove it on your own: using white-space: pre-wrap for the input let 'grow' that reset button wrapper element to the however given height. If you now add a display: none (in Firefox direct) in the browser integrated style to that element the behavior of the input the element is removed and the size of the input changes back to normal state.
So, - white-space: pre-wrap changes the behavior for the field and preserves place for sequences of white space (more details: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space). Normal behaviour is, that the property display: inline-flex from the parent element of the reset-button-container let the container flow inline and flow to the next line. If you set white-space: wrap you can see the button in the next line below the input field. (Seeing this seems to be a bug as well.) But with pre-wrap the flow is not longer possible and the button is pressed in the field ... and let grow it higher.
When you use white-space: pre-wrap, Safari preserves sequences of white space.
The simplest solution is:
.wrap {
white-space: none;
white-space: -moz-none;
}
I recommend you to check CSS-Tricks.
<div> <--linebreak
>whitespace<.innerHTML <-- linebreak
</div>
Those linebreaks and whitespace do make your element stretch because you have preserved them in the .innerHTML with {white-space: pre;}
<div>.innerHTML</div>
-or-
elem.innerHTML = elem.innerHTML.trim()
Fixes the issue for elements with a </closing tag>
However,
<input type="date" id="wrap" value='2021-12-06'>
has no .innerHTML nor a closing tag. Its value has no whitespace.
element's displayed contents, not reflected in inspector, being clipped by {max-height: 20px} rule
I have looked for a way to access the displayed contents of this tag, but couldn't find one. I would advise against using default input tags and to use js solution instead. Default input fields are known to be hard to predict and stylize across devices.

Internal CSS not override external CSS (api google)... why?

I do not understand why internal css does not overwrite the external css created by google ...
This external css need to create the Google search bar (in my case, only serves to create a results page-SERP)
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
<style type="text/css">
.gs-result .gs-title, .gs-result .gs-title * {
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
display: none;
}
.gsc-table-result {
font-family: 'PT Sans', Arial,sans-serif;
font-size: 14px;
width: 100%;
}
</style>
<script type="text/javascript">
google.setOnLoadCallback(googlata);
google.load('search', '1');
// other js-code that works ;)
</script>
</head>
why ???
thanks!
EDIT
the result page is created by google cse and is added in my div.. this the code created:
<div id="cse"> //my div
<div class="gsc-control-cse gsc-control-cse-it"> //here there is a google code... i show you only parents beacause the code is too long
<div class="gsc-control-wrapper-cse" dir="ltr" style="visibility: visible;">
</div>
Here there is a part of my code:
http://jsfiddle.net/2rg86vm6/1/
is only a part so doesn't work ;)
The answer to "Why isn't my CSS being applied?" is almost always that some other style definition is overriding it. When this happens, it can be frustrating, but don't despair: There are only 2 things you need to know:
Understand selector strength and CSS specificity.
Know how to use your browser's developer tools.
CSS Specificity and selector strength
The "selector" is the part of your style definition that targets (or "selects") your element. It's the code that comes before the curly braces in your CSS:
.gs-results {
color: #008000;
text-decoration: none;
display: none;
}
The above snippet represents a single CSS rule. The selector for the above rule is .gs-results.
Selector strength is important when you have two rules that match a single element and the styles conflict:
.a { color: blue; }
p { color: red; }
<p class="a">Am I red or am I blue?</p>
In the above example, the text is blue because a class selector has a higher specificity than an element selector. If you wanted to force the text red, you could strengthen your p selector by adding the class to it:
.a { color: blue; }
p.a { color: red; }
<p class="a">Am I red or am I blue?</p>
Now the text will be red because a selector consisting of element and class has a higher specificity than just a class selector. We can make in blue again, by increasing the specificity of the first selector. For example, specifying an ancestor class:
.x .a { color: blue; }
p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Further reading:
CSS Standard: Calculating specificity The algorithm is actually quite simple.
CSS Specificity calculator
Finding conflicting selectors
Understanding specificity is vital, but only helpful if you know the style rule that is overriding your own. Fortunately, every browser comes with excellent developer tools that make discovering applied rules a breeze.
In any browser, right click the element whose styles are not being applied as you expected, and choose "Inspect Element". This will open the developer tools with the DOM inspector open and the clicked element selected. You may have to manually select a parent or child element of the one that is selected. Once you have the correct element selected, look at the rules that are being applied. You should see yours in the list with the style properties in strikethrough:
If your particular element has a lot of style rules applied and you are having trouble finding the CSS property you care about, try the "Computed" tab. Additionally, Chrome let's you filter the styles displayed by entering the property you are interested in where it says "Filter...". IE let's you filter the computed tab.
Now that you have identified what rule is overriding your styles, you can see how you need to strengthen your selector. This should not be a difficult thing. We will get our text back to red by borrowing from the other rule's selector:
.x .a { color: blue; }
.x p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Why not just use !important?
Stephanie Rewis's tweet says it best:
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
It causes maintenance headaches. If this is code you will ever need to maintain, you will hate yourself later for using !important. If other devs need to maintain it, they will hate you.
Use !important on your code, altough I would not encourage you to do that permanently, use it just for testing (better way is to strenghten your selector):
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000 !important;
text-decoration: none !important;
display: none !important;
}

Defining custom css styles for html tags

I don't do CSS and I'm not even sure what this is called so excuse the ignorance :-)
.examples {
}
.examples b {
font-weight: bold;
}
.examples p {
margin-top: 0.9em;
margin-bottom: 0.9em;
}
I'm assuming the above means any b or p tags inside a <div class='examples'> will use the styling from .examples and anything custom defined for b or p?
Can I create my own style using that convention, like this?
.examples mystyle {
}
<div class='examples'>
<div class='mystyle'>
...
UPDATE:
I want mystyle to use examples styling, but override with a black bottom border. Using .examples .mystyle the bottom border appears outside examples div, but with .examples mystyle the enclosing div looks good, but the bottom black border is gone. My apologies, so it's not working either way.
http://jsfiddle.net/SAFX/5ft9W/
Since you are using a class on the tag it would need to be a class selector and the element must be a child of .examples:
/* Notice the `.` on mystyle */
.examples .mystyle {
}
<div class="examples">
<div class='mystyle'></div>
</div>
There are several parts to a CSS style:
.examples .mystyle { /* selector */
font-weight: bold; /* This entire line is a declaration consisting of a property & value*/
}
What you seem to be asking about is the terminology to describe child elements inheritance of style from an ancestor; this is the 'cascade' of 'Cascading Style Sheets.' Not all elements inherit from their parents/ancestors (a links, notably, do not inherit the color property by default, though specifying color: inherit; in their css declaration can make them do so).
If you're asking about how to refer to the list of selectors that determine which elements are targeted by a particular rule, that is the 'selector', or 'selector expression.'
References:
CSS (from the Mozilla Developer Network, 'MDN').
Introduction to CSS 2.1 (from the W3C).
Selectors, Level 3 (from the W3C).

remove / reset inherited css from an element [duplicate]

This question already has answers here:
How to reset/remove CSS styles for a specific element or selector only
(17 answers)
Closed last month.
I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.
I'm building and embedded script that people can put it on their sites. This script creates a div with a certain width/height and some information in it.
My problem is that some websites declare styles for div that are inherited by my div as well.
for example:
div{
background-color:red;
}
so if I don't set any background color to my div, it will show red even if I don't want that.
The only solutions I come along is to overwrite as many css proprieties, this way my div will show exactly as I want.
The problem with this solution is that there are too many css proprieties to overwrite and I want my script to be as light as it can be.
So my question is if you know another solution to my problem.
It can be in css/javascript /jQuery.
Thanks
"Resetting" styles for a specific element isn't possible, you'll have to overwrite all styles you don't want/need. If you do this with CSS directly or using JQuery to apply the styles (depends on what's easier for you, but I wouldn't recommend using JavaScript/JQuery for this, as it's completely unnecessary).
If your div is some kind of "widget" that can be included into other sites, you could try to wrap it into an iframe. This will "reset" the styles, because its content is another document, but maybe this affects how your widget works (or maybe breaks it completely) so this might not be possible in your case.
Only set the relevant / important CSS properties.
Example (only change the attributes which may cause your div to look completely different):
background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;
Choose a very specific selector, such as div#donttouchme, <div id="donttouchme"></div>. Additionally, you can add `!important before every semicolon in the declaration. Your customers are deliberately trying to mess up your lay-out when this option fails.
You could try overwriting the CSS and use auto
I don't think this will work with color specifically, but I ran into an issue where i had a parent property such as
.parent {
left: 0px;
}
and then I was able to just define my child with something like
.child {
left: auto;
}
and it effectively "reset" the property.
Technically what you are looking for is the unset value in combination with the shorthand property all:
The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.
.customClass {
/* specific attribute */
color: unset;
}
.otherClass{
/* unset all attributes */
all: unset;
/* then set own attributes */
color: red;
}
You can use the initial value as well, this will default to the initial browser value.
.otherClass{
/* unset all attributes */
all: initial;
/* then set own attributes */
color: red;
}
As an alternative:
If possible it is probably good practice to encapsulate the class or id in a kind of namespace:
.namespace .customClass{
color: red;
}
<div class="namespace">
<div class="customClass"></div>
</div>
because of the specificity of the selector this will only influence your own classes
It is easier to accomplish this in "preprocessor scripting languages" like SASS with nesting capabilities:
.namespace{
.customClass{
color: red
}
}
Try this: Create a plain div without any style or content outside of the red div. Now you can use a loop over all styles of the plain div and assign then to your inner div to reset all styles.
Of course this doesn't work if someone assigns styles to all divs (i.e. without using a class. CSS would be div { ... }).
The usual solution for problems like this is to give your div a distinct class. That way, web designers of the sites can adjust the styling of your div to fit into the rest of the design.
As long as they are attributes like classes and ids you can remove them by javascript/jQuery class modifiers.
document.getElementById("MyElement").className = "";
There is no way to remove specific tag CSS other than overriding them (or using another element).
you may use this below option.
<style>
div:not(.no_common_style){
background-color:red;
}
</style>
now , if their any place where you do not want to apply default style you can use 'no_common_style' class as class.
ex:
<div class="no_common_style">
It will not display in red
</div>
From what I understand you want to use a div that inherits from no class but yours. As mentioned in the previous reply you cannot completely reset a div inheritance. However, what worked for me with that issue was to use another element - one that is not frequent and certainly not used in the current html page. A good example, is to use instead of then customize it to look just like your ideal would.
area { background-color : red; }
One simple approach would be to use the !important modifier in css, but this can be overridden in the same way from users.
Maybe a solution can be achieved with jquery by traversing the entire DOM to find your (re)defined classes and removing / forcing css styles.

Categories