如何使用kendo-ui更改文本框的寬度？

Question

我想要兩個相鄰的文本框，寬度不同，使用kendo-ui。

我的HTML：

<tr>
    <td><input type="checkbox">1D22339</td>
    <td>12243JNJ3427676</td>
    <td><input type="text" class="k-input k-textbox.medium"><input type="text" class="k-input k-textbox.small"></td>
</tr>

我的CSS：

.k-textbox.small{
    width: 20px;
}
.k-textbox.medium{
    width: 50px;
}

問題是，兩個文本框都顯示相同（默認）大小。 我怎樣才能正確設置文本框的樣式？

Answer 1

嘗試這個：

HTML代碼：

<tr>
    <td><input type="checkbox">1D22339</td>
    <td>12243JNJ3427676</td>
    <td><input type="text" class="k-input k-textboxmedium">
        <input type="text" class="k-input k-textboxsmall"></td>
</tr>

CSS代碼：

.k-textboxsmall{
    width: 20px !important; 
}
.k-textboxmedium{
    width: 50px !important;
}

Answer 2

你應該喜歡它 -

input[type='text'].k-textbox.small{
    width: 20px;
}
input[type='text'].k-textbox.medium{
    width: 50px;
}

要么

.k-textbox.small{
    width: 20px !important; 
}
.k-textbox.medium{
    width: 50px !important;
}

希望它能幫到你。