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-日期
• .qbo-钱
• .qbo拉链
• .qbo-INT
• .qbo数字
• .qbo％的

.qbo-date类定义为：

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

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

鉴于qbo-date默认使用8em，如果要将输入长度加倍，请使用16em（如上图所示）。

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

VS