恢復默認的CSS屬性

Question

我正在編寫一個要在多個網站上使用的組件。

每個網站都有自己的樣式表，並顯示不同的東西。

我所有的HTML是一個div內包裹着一個id：但是

<div id="myComponent">...</div> 

我的組件是看所有的網站保持一致。

這很好，因爲我將樣式應用於組件中的大多數屬性。

div#myComponent p {font-size:11px;} etc 

但是我遇到了一個網站，從所有輸入字段

input {border: medium none;} 

我需要爲輸入字段我的部件內「不應用」這個指令刪除的邊框，preferrably使用瀏覽器的默認樣式輸入，因爲input type="text"的邊框樣式需要與input type="button"不同。

你會怎麼做到這一點？

Answer 1

您需要重新定義它。

https://developer.mozilla.org/en/Common_CSS_Questions#Restoring_the_default_property_value

Answer 2

div#myComponent input { border: 1px inset; } 

Answer 3

您可以使用樣式不同的輸入類型/

CSS：

div#myComponent input[type=text] { border:dashed 1px #ccc;} 
div#myComponent input[type=button] { border:solid 1px #999;} 

Answer 4

您可以使用JavaScript來添加一個類的輸入。 這裏是一個jQuery例子...

<script type = "text/javascript"> 
    $(function(){ 
     $("#myComponent input[type=text]").addClass("borderMe"); 
    }); 
</script> 

，然後定義樣式表中的 'borderMe'（或風格標籤）

<style type = "text/css"> 
.borderMe 
{ 
    border:solid 2px black; 
} 
</style> 

Answer 5

你可以做到這一點，因爲現在CSS2：border:initial;