使用css更改文本框的宽度

我有这样的css类：

.new-fld input[type="text"]{width:418px !important; margin-bottom:0px !important; height:18px !important; background-color:transparent !important; color:#FFF !important; border-bottom:1px solid #FFF; border-left:none !important; border-right:none !important; border-top:none !important; font-size:14px; /*padding:0 8px;*/}

它适用于第页上的所有输入字段

我希望某些字段的长度不同，所以我创建了另一个类似这样的类

 .new-fld input[type="text"]{width:45px !important; margin-bottom:0px !important; height:18px !important; background-color:transparent !important; color:#FFF !important; border-bottom:1px solid #FFF; border-left:none !important; border-right:none !important; border-top:none !important; font-size:14px; /*padding:0 8px;*/}

   <div class="new-fld">
                                        <input type="text" value="+44 1793 853219" name="">
                                          <input type="text" value="+ 44" readonly="readonly" name="Dialprefix1" id="Dialprefix1" class="dialprefix" style="text-align:right;width:45px;">

                                        <span>*</span>                                        
                                        </div>

然后像这样应用它

 .new-fld input[type="text"]{width:45px !important; margin-bottom:0px !important; height:18px !important; background-color:transparent !important; color:#FFF !important; border-bottom:1px solid #FFF; border-left:none !important; border-right:none !important; border-top:none !important; font-size:14px; /*padding:0 8px;*/}

   <div class="new-fld">
                                        <input type="text" value="+44 1793 853219" name="">
                                          <input type="text" value="+ 44" readonly="readonly" name="Dialprefix1" id="Dialprefix1" class="dialprefix" style="text-align:right;width:45px;">

                                        <span>*</span>                                        
                                        </div>

*                                        

如您所见，我以文本框样式输入了宽度，但它仍然不起作用

但它不起作用。请给我推荐好的解决方法。

使用

 <input type="text" value="+ 44" readonly="readonly" name="Dialprefix1" id="Dialprefix1" class="dialprefix" style="text-align:right" size='10' />

并检查结果

好的，这将解决您的问题（但我希望有一个很好的理由添加！对所有样式都很重要）：

。新的fld输入[type=“text”]{宽度：418px！重要；

**

.新的fld输入[type=“text”]{宽度：45px！重要

**

---

您有两个名称相同的类。您必须为其指定不同的名称。

我不明白您为什么不简单地为单个元素声明不同的属性？ 在您的解释和选择的答案中，它似乎是为包含的div设置属性的选择方法

又名：

我的解决方案： 为什么不给每个输入元素提供它们自己的id/类呢。 在您的示例中，您为第二个文本框提供了以下标识符：id=“Dialprefix1”，class=“dialprefix”

因此，可以将属性设置为：

#Dialprefix1
{
    size:22px; /* Change value (Width of box) */
    maxlength:22px; /* Change value (Max Accepted amount of chars in textbox) */
}

或通过类声明指定属性：

.dialprefix
{
    size:22px; /* " " */
    maxlength:22px; /* " " */
}

有关可以指定给输入字段的不同属性的详细信息，请参见。

---

注意：CSS中的前缀“.”告诉解析器您正在引用一个类，而“#”前缀指的是该特定HTML元素的id。

我尝试了这个方法，但没有成功：.dialprefix{宽度：45px！重要；边距底部：0px！重要；高度：18px！重要；背景色：透明！重要；颜色：#FFF！重要；边框底部：1px实心#FFF；边框左侧：无！重要；边框右侧：无！重要；边框顶部：无！重要；字体大小：14px；/*填充：0 8px；*/}尝试使用任何样式将两个不同的类应用于它们。如果要使用类new fld为位于同一个div中的文本框指定不同的样式，则必须显式应用样式。不要写入！重要信息是，它将覆盖其他样式。您的浏览器是什么？您的DOCTYPE是什么？我尝试了这一点并成功了已工作但不确定原因：。smalltextbox输入[type=“text”]{宽度：45px！重要；边距底部：0px！重要；高度：18px！重要；背景色：透明！重要；颜色：#FFF！重要；边框底部：1px实心#FFF；边框左侧：无！重要；边框右侧：无！重要；边框顶部：无！重要；字体大小：14px；}我真的不明白你为什么要放！对每种样式都很重要？CSS是级联样式表，所以如果你遵循一些你几乎从不需要使用的简单规则，它就是级联的！重要的只是为了一些合理的情况。所以你可以删除所有！重要的是，你的原始代码也会工作。每当你看到你过度使用的时候t我要确定你的代码有问题。所以只要做一次噪音清理，一切都会好起来的。