Force default appearance on input[type="submit"]

Question

I have CSS that is cascading down to style a Submit input:

<input type="submit" class="dont-style" />

How would I un-apply any CSS on this item -- i.e., so it appears like the default submit button ?

The proper way to do this is by preventing that it happens. Use dedicated classes in your css instead of selecting elements by tag type. — kasper Taeymans, Mar 04 '15 at 00:01

kasper Taeymans · Accepted Answer · 2015-03-05T10:25:34.080

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]';
}

Force default appearance on input[type="submit"]

1 Answers1