Force default appearance on input[type=submit]
CSS: cascading style sheets. It's in the name... styles will cascade down. The proper answer to this problem is preventing that it can happen by using dedicated classes. Or override all styles to default.
However I was thinking last night about this question and came to the idea that you can place the submit button in an iframe. Since this is an other document the styles of the parent do not affect the submit button in the iframe.
While it is possible to submit a form on the parent document by clicking on a submit button in an iframe it is not fully what you want.
Then I came to the idea to get the computed style from a submit button in an iframe (hidden) and compare it with the computed style from the submit button in the parent. If styles are different from default (= computed style from element in iframe ) then apply this default style. I came up with this JSFIDDLE DEMO. It is working in IE and Chrome but fails in Firefox because getComputedStyle() returns 0 values when used on an element in an iframe (bug?).
This is not a solution for your answer but I got interested and thought I might share this experiment.
$('#myiframe').contents().find('html').html('<html><head></head><body><input type="submit" id="iframesubm" /></body></html>');
var elem1 = document.getElementById("parentsubm");
var style1 = window.getComputedStyle(elem1, null);
var iframe = document.getElementById('myiframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var elem2 = innerDoc.getElementById("iframesubm");
var style2 = window.getComputedStyle(elem2, null);
for(k in style1){
if(style1[k] !==style2[k] && k.indexOf('-') <= 0 && !isFunction(style1[k]) ){
console.log(k +' : parent-> '+style1[k]+' iframe-> '+style2[k]);
elem1.style[k]=style2[k];
}
}
function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
Reset/remove CSS styles for element only
The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec. The initial keyword has broad browser support except for the IE and Opera Mini families.
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;
}
/* basic modern patch */
#reset-this-root {
all: initial;
* {
all: unset;
}
}
- Relevent github repo with a december 2017 more exaustive list
- Related
- Related from MDN
- Related W3C specs
As mentioned in a comment by @user566245 :
this is correct in principle, but individual mileage may vary. For
example certain elements like textarea by default have a border,
applying this reset will render those textarea's border less.
JAVASCRIPT ?
Nobody thought about other than css to reset css? Yes?
There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310
getElementsByTagName("*") will return all elements from DOM. Then you
may set styles for each element in the collection:
answered Feb 9 '13 at 20:15 by VisioN
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
var element = allElements[i];
// element.style.border = ...
}
With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.
For comparison, here is Firefox 40.0 values list for a<blockquote style="all: unset;font-style: oblique"> where font-style: oblique triggers DOM operation.
align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;
how can I overcome existing css and change button style to the default windows style button?
You won't, and shouldn't, use !important. You just need to properly override following the principles of CSS specificity and inheritance.
Explanation of CSS Inheritance
For example--let's say your 'unwanted' button style is something like this:
<input type="button" class="unwanted" />
And you've got CSS in your (uneditable) style sheet:
.unwanted {
fooRule: whatever;
barRule: whatever;
}
Using inheritance, you just need to write your own external stylesheet. Things to remember:
(1) You should put it below the existing that contains the 'unwanted' stylesheet reference. Inheritance processes external stylesheets sequentially. This follows the 'closest rule wins' principle.
(2) The way you write the CSS rule must be MORE specific than the rule that currently applies the unwanted style. Again, the above link really helps explain this.
Going back to our previous example, the unwanted style is being applied simply by a class of 'unwanted'. Your rule can override without editing the HTML. Alternately you can edit the HTML--it's up to you. It also depends on how globally you want to affect button styles.
If you want to globally affect all buttons with 'unwanted' class, you would do:
input[type='button'] .unwanted {
fooRule:override;
}
If you only want to change SOME of the buttons that have a style of unwanted, you would instead do:
.unwanted.newRule {
fooRule:override;
}
And then you would mod your HTML to be:
<input type="button" class="unwanted newRule">
Note that .unwanted.newRule means it will only impact 'elements' with a class of both unwanted and newRule. It would not change anything if the unwanted style is set up like this:
<form class="unwanted">
<input type="button" class="newRule" />
</form>
The reason being .unwanted.newRule means 'both classes are on the same element'. You would change it to :
.unwanted .newRule {foo}
So--my point is, there are a ton of semantically correct ways to CORRECTLY utilize CSS specificity and inheritance, and do what you want to do, without having to use !important.
On a side note, the only reason you'd have to use !important is if the css styling the button is actually being applied using javascript that writes 'style' attributes to the HTML element. If that is the case, (1) don't use that JS, as that is a horrible method for styling using JS, (2) you will have to use !important to override the inline style being applied by the JS. Again, this is because of how cascading works--in this case, CSS is applied by (1) browser (user agent), (2) external css, (3) internal 'head' css, (4) internal inline css, (5) author !important declarations, (6) user !important declarations.
Creating a hover state on a submit button
P:
please check this
input[type="submit"]:hover {
color: red;
}
you can also specify a class or id before the input if you need it for a specific element.
DEMO
How to select and change color of a button and revert to original when other button is clicked
What you can do is change all the other buttons (except the currently selected one) to dark grey color.
function chcolor(btn) {
var property=document.getElementById(btn);
property.style.backgroundColor="#0099FF";
for(var i=1;i<=24;i++) {
if(!(btn=='btn'+i)) {
var property=document.getElementById('btn'+i);property.style.backgroundColor="#333333";}}
}
Related Topics
My Svg Image Ignores Its Stylesheet When Used as Background Image
What's the Purpose of Using CSS Browser Reset Code
Force Ckeditor to Add a Class to P-Tags
How Does CSS Computation for Background Percentages Work
Which CSS Selector Can Be Used to Select a Flex Box Item in Wrapped State
Apply a CSS Filter Only on Background
Grid-Area Does Not Seem to Work with the Attr Function, Is This by Design
Vertically Center Image on Page and Maintain Aspect Ratio on Resize
How to Create Curved Line with Rounded Edges
How to Do Ie Conditionals in CSS
Bikeshedding CSS3 Property Alternative
Google Webfont Conflict with Local Font
How to Get a Negative Value of a CSS Variables in a Calc() Expression
Removing the Clear and Reveal Password Icons from Internet Explorer