Search code examples
cssselectbootstrap-4right-to-left

Align title of Bootstrap selectpicker field to the right


I've created a select field using Creative Tim's Material Dashboard Pro.

I want to align the select field and its option to the right, but so far I managed to align only the options, not its title or the selected option:

As you can see in the picture above, only the options are aligned to the right, but not the title of the field.

Even after I choose an option, the title is still aligned to the left and not to the right.

This is the code I'm using to create this select field:

<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>

How can I align the title of the select field to the right?


Solution

  • So I figured out how to solve it, using HTML tags inside the title attribute and by using the data-content attribute, like this:

    <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>