QBO3覆盖标准输入的css

Question

使用qbo-xxxx类更改输入字段的css是什么？我想把qbo-date字段的宽度改为200px。如下所示：

<style type="text/css">
.section {
    background:none;
    color:#777;
    border-bottom: #CCC 1px solid;
    font-weight:normal;
    text-transform:uppercase;
    margin-bottom:1em;
}

form.grid label:not(.radio) {
    width: 200px;
}
</style>

Answer 1

TLDR；您应该使用类似于：

.qbo-date
{
    width: 16em !important;
}

QBO3为qbo.ApplicationWeb / Styles / qbo3.less中定义的常见输入类型提供了几个标准类，包括：

• .qbo-date
• .qbo-money
• .qbo-zip
• .qbo-int
• .qbo-numeric
• .qbo-percent

.qbo-date类的定义如下：

.qbo-date
{
    width: 8em !important;
}

注意use of em vs px -你的覆盖也应该考虑响应式设计！

由于qbo-date默认使用8em，如果您想要将输入长度增加一倍，请使用16em (如顶部所示)。

考虑直接在Chrome中进行实验；您可以直接在调试器中编辑CSS：

​

​

vs：

​

​