2015-03-03 4 views
0

У меня есть CSS, который каскадные вниз к стилизации Submit вход:Force внешний вид по умолчанию на входе [тип = «отправить»]

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

Как бы я не-применять любые CSS по этому вопросу - то есть, поэтому он выглядит как кнопка submit?

+0

возможно дубликат [ВОЗВРАТ CSS стиль <входной тип = кнопка отправки его стиля по умолчанию] (http://stackoverflow.com/questions/381100/reverting-css-style-of-input-type- submit-button-to-its-default-style) – JJJ

+1

Правильный способ сделать это - предотвратить это. Используйте выделенные классы в своем CSS вместо выбора элементов по типу тега. –

ответ

1

CSS: каскадные таблицы стилей. Это имя ... стили будут каскадом вниз. Правильный ответ на эту проблему - это предотвращение того, что это может произойти с помощью выделенных классов. Или переопределите все стили по умолчанию.

Однако я думал об этом вчера вечером и пришел к мысли, что вы можете поместить кнопку отправки в iframe. Поскольку это другой документ, стили родителя не влияют на кнопку отправки в iframe.

Хотя можно отправить форму в родительском документе, нажав кнопку отправки в iframe, это не совсем то, что вы хотите.

Затем я пришел к идее получить вычисленный стиль из кнопки отправки в iframe (скрытый) и сравнить его с вычисленным стилем из кнопки отправки в родительском. Если стили отличаются от значений по умолчанию (= вычисленный стиль из элемента iframe), примените этот стиль по умолчанию. Я придумал это JSFIDDLE DEMO. Он работает в IE и Chrome, но не работает в Firefox, потому что getComputedStyle() возвращает 0 значений при использовании в элементе iframe (ошибка?).

Это не решение для вашего ответа, но я заинтересовался и подумал, что могу поделиться этим экспериментом.

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