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

I am developing a chrome extension which works on many websites and adds a search text box to the page. Is there a way to mark this input element such that it only uses browser's default CSS styles (and not those that are specific to the website)?

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

The issue is different sites will have different styles applied for their input boxes. For the extension input box to look consistent across web sites, I'd have to explicitly specify values for all the relevant CSS properties. I am trying to avoid that and am wondering if I can instead mark this element somehow to not use the website styles but only use the browser defaults?

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

2 个解决方案

#1

There is no way in CSS to make an element isolated from the effects of style sheets on the page, and there is no way to tell that only browser default style sheet be applied. You can just set properties to desired values, or modify the style sheets being used so that selectors don’t match your element.

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

You might consider putting the search box in a separate file and embedding it via iframe (or object) inserted into a page and perhaps positioned absolutely. Within the framed document, the style sheets of the framing document have no effect.

您可以考虑将搜索框放在单独的文件中，并通过插入页面的iframe（或对象）嵌入它，并且可能绝对定位。在框架文档中，框架文档的样式表无效。

#2

Just a follow-up to my question. Here's the CSS that I am using to have the text input element look and behave consistently across different websites. It is working well for all sites that I have tested on, so far. Any feedback/ comments on this would be great.

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

`

`