我的解决方案：

Question

我有这样的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;*/}

它适用于页面上的所有输入fild。

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

 .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>

正如您所看到的，我在文本框样式中输入了宽度，但仍无法正常工作。

但它不起作用。请建议我很好的解决方案。

Answer 1

使用

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

并检查结果。

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

<input type="text" value="+ 44" readonly="readonly" name="Dialprefix1" id="Dialprefix1" class="dialprefix" style="text-align:right;width:45px !important;">

Answer 2

.new-fld输入[type =“text”] {width：418px！important;

**

.new-fld input [type =“text”] {width：45px！important;

**

你有两个同名的班级。你必须给它不同的名字。

Answer 3

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

又名：

.new-fld
{
    property:value;
}

我的解决方案：

为什么不给每个输入元素自己的id / class。在您的示例中，您已为第二个文本框提供以下标识符：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; /* " " */
}

有关可分配给输入字段的不同属性的详细信息，请参阅。 http://www.w3schools.com/tags/tag_input.asp

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

使用css更改文本框的宽度

3 个答案:

我的解决方案：