可能標記一個html元素只使用瀏覽器的默認css？

我正在開發一個適用於很多網站的擴展程序，並在頁面中添加了一個搜索文本框。有沒有辦法標記這個輸入元素，使它只使用瀏覽器的默認CSS樣式（而不是那些特定於網站的樣式）？可能標記一個html元素只使用瀏覽器的默認css？

問題是不同的網站將有不同的樣式應用於他們的輸入框。爲了使擴展輸入框在網站上看起來一致，我必須明確指定所有相關CSS屬性的值。我試圖避免這一點，並想知道如果我可以改爲標記這個元素莫名其妙地不使用網站風格，但只使用瀏覽器的默認值？

來源

2012-12-27 tanushree

在CSS中沒有辦法使頁面上的樣式表的效果與元素隔離，並且無法判斷是否只應用了瀏覽器的默認樣式表。您可以將屬性設置爲所需的值，或者修改正在使用的樣式表，以便選擇器與您的元素不匹配。

你可能會考慮把搜索框，在一個單獨的文件，並通過插入到一個頁面，也許絕對定位iframe（或object）嵌入它。在框架文檔中，框架文檔的樣式表不起作用。

來源

2012-12-27 09:21:34

查找[CSS特異性（http://www.w3.org/TR/CSS2/cascade.html#specificity）如果你要爲第一個解決方案 – Sudarshan

@Jukka我貼這裏有一個相關的[問題]（http://stackoverflow.com/questions/16589222/issues-with-using-an-iframe-to-show-chrome-extension-ui-a-web-page）。聽聽你的想法會有幫助。 – tanushree

只是我的問題的後續行動。以下是我用來讓文本輸入元素在不同網站上保持一致的CSS。到目前爲止，我所測試過的所有網站都能正常運行。任何對此的反饋/評論都會很棒。

input.reset-text-input { 

/******** 
dimensions and float property of the input element 
*********/ 

box-sizing: border-box !important; /*using box-sizing for easier calculations. make sure to specify this because it varies across sites, and changes the effective dimensions of the textbox*/ 
margin: 0 !important; 
padding: 2px !important; 
width: 150px !important; 
height: 20px !important; 
float: none !important; 


/******** 
border, outline and drop shadow 
********/ 

border: 1px solid #999 !important; 

/*some border radius*/ 
-webkit-border-radius: 2px !important; 
-moz-border-radius: 2px !important; 
border-radius: 2px !important; 

/*no drop shadow*/ 
-webkit-box-shadow: none !important; 
-moz-box-shadow: none !important; 
box-shadow: none !important; 

outline: none !important; 


/********** 
text properties 
***********/ 
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 
font-size: 13px !important; 
color: black !important; 
vertical-align: baseline !important; 
word-spacing: 0px !important; 

/*not sure if something like this can help. commented for now*/ 
/*-webkit-appearance: textfield !important;*/ 
/*appearance: textfield !important;*/ 
} 

input.reset-text-input:focus { 
    /*show an outline around the element that is same as chrome's default. this needs to be set as it is turned off on some sites. */ 
    outline: 5px auto -webkit-focus-ring-color !important; 
}

來源

2013-01-05 20:54:02 tanushree

可能標記一個html元素只使用瀏覽器的默認css？

回答

相關問題