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>

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


You can try this in your CSS

.filter-option {
     text-align: right;

my channel Youtube


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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.