Question

我正在编写一个可在多个网站上使用的组件。

每个网站都有自己的样式表，并以不同的方式显示某些内容。

我的所有html都包含在一个带有id的div中：

<div id="myComponent">...</div>

然而，

我的组件在所有网站上看起来都是一致的。

这很好，因为我将样式应用于组件中的大多数属性。

div#myComponent p {font-size:11px;} etc

但是我遇到了一个从所有输入字段中删除边框的网站

input {border: medium none;}

我需要为组件中的输入字段“取消应用”此指令，并且最好使用浏览器的默认样式作为输入，因为input type="text"的边框样式需要与{{1}不同}。

你将如何实现这一目标？

Answer 1

你现在可以从CSS2开始：border:initial;

Answer 2

你需要重新定义它。

Answer 3

div#myComponent input { border: 1px inset; }

Answer 4

您可以将样式用于不同的输入类型/

css：

div#myComponent input[type=text] { border:dashed 1px #ccc;} 
div#myComponent input[type=button] { border:solid 1px #999;}

Answer 5

您可以使用javascript将类添加到输入中。这是一个jquery示例...

<script type = "text/javascript">
    $(function(){
        $("#myComponent input[type=text]").addClass("borderMe");
    }); 
</script>

然后在样式表（或样式标记）中定义'borderMe'

<style type = "text/css">
.borderMe
{
    border:solid 2px black;
}
</style>