Question

我使用以下简单的jquery将类.error添加到输入元素：

$(this).addClass("error");

错误类如下所示：

.error{
    border-color: red !important;
    border-style: solid !important;
    box-sizing: border-box;
}

我的输入风格：

.fatform {
    width:125px; 
    height:21px;  
    text-align:left; 
    background-color: rgba(255, 255, 255, 1); 
    border:none; 
    padding:10px; 
}

.checkout_float_left {
    float: left;
    margin: 5px;
}

HTML：

<div class="checkout_float_left">
<input type="text" name="email" value="email@email.com" style="width:290px;" class="fatform error" title="E-Mail">  
</div>

<div class="checkout_float_left">               
<input type="text" name="phone" value="5144291849" style="width:290px;" class="fatform error" title="Phone Number">             
</div>

激活错误类时，边框显示正确但输入缩小。如果我不使用边框大小调整，那么当显示边框时，它会推动元素，因为它会将它们的大小更改为更大。

我该怎么做才能避免这种情况？

Answer 1

尝试为输入元素添加min-width到css，因为它会修复输入控件的大小。

让我知道它是否适合您

在表单错误上添加边框导致输入大小更改

1 个答案: