html - 可以将 html 元素标记为仅使用浏览器的默认 css 吗？

Question

我正在开发一个适用于许多网站的 chrome 扩展，并在页面中添加了一个搜索文本框。有没有办法标记这个输入元素，使它只使用浏览器的默认 CSS 样式（而不是那些特定于网站的样式）？

问题是不同的站点将为其输入框应用不同的样式。为了使扩展输入框在网站上看起来一致，我必须明确指定所有相关 CSS 属性的值。我试图避免这种情况，并且想知道是否可以以某种方式标记此元素以不使用网站样式而仅使用浏览器默认值？

Answer 1

CSS 中没有办法使元素与页面上样式表的效果隔离，也没有办法告诉只应用浏览器默认样式表。您可以将属性设置为所需的值，或修改正在使用的样式表，以使选择器与您的元素不匹配。

您可能会考虑将搜索框放在一个单独的文件中，并通过iframe（或object）将其嵌入到页面中，并且可能绝对定位。在框架文档中，框架文档的样式表不起作用。

Answer 2

只是我的问题的后续行动。这是我用来让文本输入元素在不同网站上的外观和行为一致的 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;
}

`