可以将html元素标记为仅使用浏览器';什么是默认css?

可以将html元素标记为仅使用浏览器';什么是默认css?,html,css,google-chrome-extension,webkit,Html,Css,Google Chrome Extension,Webkit,我正在开发一个chrome扩展,它可以在许多网站上运行,并在页面中添加一个搜索文本框。是否有方法标记此输入元素,使其仅使用浏览器的默认CSS样式(而不是特定于网站的样式) 问题是,不同的站点将为其输入框应用不同的样式。为了使扩展输入框在各个网站上看起来一致,我必须明确指定所有相关CSS属性的值。我试图避免这种情况,我想知道我是否可以以某种方式标记此元素,使其不使用网站样式,而只使用浏览器默认值 CSS中没有办法使元素与页面上样式表的效果隔离开来,也没有办法告诉您只能应用浏览器默认样式表。您可以将

我正在开发一个chrome扩展,它可以在许多网站上运行,并在页面中添加一个搜索文本框。是否有方法标记此输入元素,使其仅使用浏览器的默认CSS样式(而不是特定于网站的样式)


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

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


你可以考虑把搜索框放在一个单独的文件中,并将它嵌入到代码中。在框架文档中,框架文档的样式表无效。

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

如果你是第一个,请查看solution@Jukka我在这里贴了一个相关的。听听你的想法会很有帮助。