Question

我正在将输入字段自定义为100％。如果我必须这样做，我很困惑：

首先

.fullwidth
input,
input[type="text"]
 {
    width: 100%;
    -webkit-box-sizing : border-box;‌
    -moz-box-sizing : border-box;
    box-sizing : border-box;
    height: 35px;
}

或只是

第二

.fullwidth
 {
    width: 100%;
    -webkit-box-sizing : border-box;‌
    -moz-box-sizing : border-box;
    box-sizing : border-box;
    height: 35px;
}

不知何故，第二个没有对我的文本框产生任何影响。但是当我使用第一个时，它会影响文档中的所有输入字段，从而破坏其他元素。样式。

Answer 1

您应该为输入提供ID

<input type="text" id="yourId" name="yourName">

在你的css文件中你应该写

#yourId
{
    width: 100%;
    -webkit-box-sizing : border-box;‌
    -moz-box-sizing : border-box;
    box-sizing : border-box;
    height: 35px;
}

应该有效

Answer 2

也许在您的文件中，有一个名为.fullwidth的元素包裹着input

HTML：

<div class="fullwidth">
    <input type="text">
</div>

您的问题：

因为.fullwidth input将样式指向输入，.fullwidth仅适用于父元素，但输入仍然具有默认宽度。 只有第一个可以使用。但是，您在第一个条件中键入, input[type="text"] {，这意味着： .fullwidth类中的所有输入元素以及属性类型设置为＆＃34的所有输入元素; text＆＃34;将应用以下样式

请注意，浏览器将不同的样式默认设置为不同的元素，而常见的div则设置为默认width:100%;。输入为width:SOMEPIXELS;

解决方案：

.fullwidth input[type="text"],
 {
    width: 100%;
    -webkit-box-sizing : border-box;‌
    -moz-box-sizing : border-box;
    box-sizing : border-box;
    height: 35px;
}

此解决方案声明所有子输入元素，其属性类型设置为＆＃34; text＆＃34;在.fullwidth类下将应用以下样式

Answer 3

尝试在选择器中更加具体

我怀疑输入是否有类fullwidth。

根据您的第二个解决方案，您正在为fullwidth课程提供样式，而在第一个解决方案中，您将样式提供给input内的fullwidth。

如果您的输入具有类全宽，请尝试input.fullwidth。

如果这不起作用，请使用它的父类（即parent-class input.fullwidth）来引用您的输入。

如果仍然不起作用，您可以为宽度添加另一个类，左边说temp，然后您可以使用input.fullwidth.temp

来引用它

如何覆盖输入字段中的所有css样式类而不影响其他元素？

3 个答案:

HTML：

您的问题：

解决方案：