将Bootstrap selectpicker字段的标题右对齐

我已经使用Creative Tim's Material Dashboard Pro创建了一个select字段。

我想将选择字段及其选项向右对齐,但到目前为止,我仅设法对齐了选项,而不是其标题或所选选项:

将Bootstrap selectpicker字段的标题右对齐

如上图所示,只有选项在右侧对齐,而字段的标题未对齐。

将Bootstrap selectpicker字段的标题右对齐

即使我选择了一个选项,标题仍然是左对齐而不是右对齐。

这是我用来创建此select字段的代码:

<select class="selectpicker" data-style="select-with-transition" title="Select One" dir="rtl">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

如何将select字段的标题向右对齐?

dido17 回答:将Bootstrap selectpicker字段的标题右对齐

因此,我想出了解决方法,例如,使用title属性内的HTML标记并使用data-content属性,如下所示:

<select class="selectpicker" data-style="select-with-transition" title="<p style='text-align: right; margin-right: 30px;'>Select One</p>" dir="rtl">
    <option data-content="<p style='text-align: right; margin-right: 30px;'>A</p>" value="a">A</option>
    <option data-content="<p style='text-align: right; margin-right: 30px;'>B</p>" value="b">B</option>
    <option data-content="<p style='text-align: right; margin-right: 30px;'>C</p>" value="c">C</option>
</select>
本文链接:https://www.f2er.com/3151854.html

大家都在问