css - Jquery mobile根据控件的类更改css宽度

Question

我目前正在经历JQM. 我有说两个下拉列表控件，我想根据它们的类为它们添加不同的宽度。我该怎么做？

<asp:DropDownList runat="server" ID="ddlWidth1" 
        data-theme="e" </asp:DropDownList>

<asp:DropDownList runat="server" ID="ddlWidth2" 
        data-theme="e" </asp:DropDownList>

渲染后HTM，JQM设置一些类，我可以ddl's像这样设置宽度：

.ui-select{
    width: 225px;
}

但这使得两个ddl's宽度相同。添加css类将无济于事，因为在渲染ddls后我会丢失这些类。HTML

Answer 1

这很容易做到，选择框必须包装到适当data-role="fieldcontain"的 DIV 中。它们是专门为此目的而制造的。通过它们，任何内部表单元素都可以轻松修改。

工作示例：http: //jsfiddle.net/Gajotres/FvQ5c/

HTML：

<div data-role="fieldcontain" id="ddlWidth1">
    <select>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>
<div data-role="fieldcontain" id="ddlWidth2">
    <select>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

CSS：

#ddlWidth1  .ui-select { 
    width: 225px;
}

#ddlWidth2 .ui-select { 
    width: 100%;
}