Question

我有大多数输入元素所需的CSS样式，即：

input{
    width: 100%;
    margin: 5px 0 0 -2px;
}

但是，有几种情况我希望输入元素远不如此宽。我怎么能做到这一点？在我看来它应该是这样的：

<input type="date" style="width=100px"></input>

...覆盖100％的宽度，但这不起作用。我赞成“选择退出css样式应用程序”和类似的短语，但没有找到我需要的东西。

Answer 1

使用：代替=

<input type="date" style="width:100px"></input>

Answer 2

您可以使用具有更具体选择器的其他样式规则，该规则将应用于该类型/那些类型。

input[type=date] {
    width: 100px;
}

正如本片段所示......

＆＃13;

input {
    width: 75%;
    margin: 5px 0 0 5px;
}
input[type=date] {
    width: 120px;
}
label:after {
    content: ': ';
}
div.inputs {
    padding: 1em;
    background-color: #f7f7e0;
}

＆＃13;

<div class="inputs">
    <label for="first">First</label><input type="text" name="first" id="first" /><br/>
    <label for="second">Second</label><input type="text" name="second" id="second" /><br/>
    <label for="thedate">Date</label><input type="date" name="thedate" id="thedate" /><br/>
    <label for="fourth">Fourth</label><input type="text" name="fourth" id="fourth" /><br/>
</div>

＆＃13;

或者a fiddle来证明这一点。

Answer 3

使用课程。

对于全宽度输入，请执行以下操作：

HTML

<input type="date" class="full-width"></input>

CSS

input.full-width {
        width: 100%;
        margin: 5px 0 0 -2px;
    }

对于您想要的输入，让我们说，80％，执行此操作：

HTML

<input type="date" class="short-width"></input>

CSS

input.short-width {
        width: 80%;
        margin: 5px 0 0 -2px;
}

我建议上课，因为在你提出的问题中你提到了几个案例＆＃34;你想在哪里做出改变。因此，对于一个类，您只需要在一个地方进行一次样式更改，并且该类的所有元素都将获得该消息。这是最小化维护和故障排除的好方法。

如果您只想在一个元素中进行样式更改，那么使用内联样式有其好处。内联样式还有许多其他好处，但它们不在本问题的范围之内。

最后，我在上面的CSS块中添加了元素选择器（input），只是为了增加specificity。但是，您可以安全地删除它们并只使用类名（即.full-width和.short-width）。

如何根据具体情况选择退出CSS样式？

3 个答案: