CSS:将输入元素重置为原始宽度

I don't think this is possible but I am going to ask it nonetheless, lets say I have the following HTML:

我不认为这是可能的但我还是要问它，假设我有以下HTML

<div style="width: 500px;">
    <input class="full" />
</div>

And the corresponding CSS:

和相应的CSS:

input {
    width: 100%;
}

.full {
    display: inline;
    float: left;
    margin: 0 2%;
    width: 96%
}

In this case my input element will have a width of 480px, this works fine for most of my needs but in some specific cases it doesn't, for instance:

在这种情况下，我的输入元素的宽度为480px，这对我的大部分需求都是适用的，但在某些特定的情况下，它不会，例如:

<div style="width: 500px;">
    <input name="day" size="2" />
    <input name="month" size="2" />
    <input name="year" size="4" />
</div>

This will make the browser render each input with a width of 500px (jsFiddle)...

这将使浏览器呈现每个输入的宽度为500px (jsFiddle)……

Is there anyway to force the browser to rollback to the default style?

是否存在强制浏览器回滚到默认样式的方法?

3 个解决方案

#1

Just set width:auto to those inputs. This works with or without setting the size attribute (respects size if you have set it).

只要设置宽度:自动到那些输入。这可以使用或者不设置size属性(如果您设置了size，请考虑它的大小)。

http://jsfiddle.net/Madmartigan/kQDpY/3/

http://jsfiddle.net/Madmartigan/kQDpY/3/

BTW, float will automatically set the display type to block, your inline declaration for the div isn't doing anything so you don't need it.

顺便说一下，float会自动将显示类型设置为块，因为div的内联声明没有做任何事情，所以您不需要它。

#2

Just override it with an !important selector:

用一个重要的选择器覆盖它:

input {
    width: auto !important;
}

And a demo: http://jsfiddle.net/kQDpY/4/

和一个演示:http://jsfiddle.net/kQDpY/4/

#3

width: auto;

Is this what you're after?

这就是你想要的吗?

Basically I've set width:auto; to all inputs that define size attribute. Maybe this isn't the correct attribute but it shows how you can distinguish inputs between each other.

基本上我设置宽度:汽车;对于所有定义size属性的输入。也许这不是正确的属性，但它显示了如何区分输入。

But basically you haven't told us what you'd like with these three inputs. Would you want them to occupy the whole width but should be 2:2:4 in size or is it just auto with as it seems we all did...

但是基本上你还没有告诉我们你想要这三个输入。你是想让它们占据整个宽度，但应该是2:2:4的大小，还是像我们看起来的那样……