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;
}

`

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

2 个答案: