Right-align SELECT-OPTIONS text

Question

Right-align SELECT-OPTIONS text

Here are the screenshots of the form I'm currently working on.

I am aiming to create a select box in the form where the text within the options is aligned to the right. After an option is selected, the chosen text should be displayed as illustrated in the image below:

Sample HTML Code:

<select>
    <option value="0" selected="selected" style="text-align: right;">EqualsTo</option>
    <option value="1">LessThan</option>
    <option value="2">GreaterThan</option>
    <option value="3">LessThanEqualsTo</option>
    <option value="4">GreaterThanEqualsTo</option>
    <option value="5">Between</option>
</select>

javascript jquery css html

Answer 1

Answer №1

Here is a helpful solution for you to try out.

Click here to view the solution

For the HTML part:

<select id="mySelect" dir="rtl">
    <option value="0" selected="selected" >EqualsTo</option>
    <option value="1">LessThan</option>
    <option value="2">GreaterThan</option>
    <option value="3">LessThanEqualsTo</option>
    <option value="4">GreaterThanEqualsTo</option>
    <option value="5">Between</option>
</select>

JS code snippet:

function InitializeSelect(elem) {
    $("#" + elem).each(function () {
        $(this).wrap('<div class="selectbox"/>');
        $(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
        var val = $(this).children("option:selected").text();
        $(this).next(".selecttext").text(val);
        $(this).change(function () {
           var val = $(this).children("option:selected").text();
           $(this).next(".selecttext").text(val);
       });
       var selectId = $(this).attr('id');
          if (selectId !== undefined) {
           var linkClass = selectId;
       }
       if (linkClass) {
           $(this).parent('.selectbox').addClass(linkClass);
       }
   });
}

$(document).ready(function(){
    InitializeSelect('mySelect');
});

CSS styling:

.selectbox {
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
border: 1px solid #CCC;
background: none repeat scroll 0 0 #FFFFFF;
min-width: 160px;
max-width:220px;
width: auto;
...

... and so on (CSS continued for brevity)

Answer 2

Here is a helpful solution for you to try out.

Click here to view the solution

For the HTML part:

<select id="mySelect" dir="rtl">
    <option value="0" selected="selected" >EqualsTo</option>
    <option value="1">LessThan</option>
    <option value="2">GreaterThan</option>
    <option value="3">LessThanEqualsTo</option>
    <option value="4">GreaterThanEqualsTo</option>
    <option value="5">Between</option>
</select>

JS code snippet:

function InitializeSelect(elem) {
    $("#" + elem).each(function () {
        $(this).wrap('<div class="selectbox"/>');
        $(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
        var val = $(this).children("option:selected").text();
        $(this).next(".selecttext").text(val);
        $(this).change(function () {
           var val = $(this).children("option:selected").text();
           $(this).next(".selecttext").text(val);
       });
       var selectId = $(this).attr('id');
          if (selectId !== undefined) {
           var linkClass = selectId;
       }
       if (linkClass) {
           $(this).parent('.selectbox').addClass(linkClass);
       }
   });
}

$(document).ready(function(){
    InitializeSelect('mySelect');
});

CSS styling:

.selectbox {
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
border: 1px solid #CCC;
background: none repeat scroll 0 0 #FFFFFF;
min-width: 160px;
max-width:220px;
width: auto;
...

... and so on (CSS continued for brevity)

Answer 3

Answer №2

Here is a CSS snippet you can use:

select{
   direction: rtl;
}

Answer 4

Here is a CSS snippet you can use:

select{
   direction: rtl;
}

Answer 5

Answer №3

If you want to position the arrow of the select option on the right side, you could implement the following CSS:

select {
    text-align-last: right;
}

option {
    direction: rtl;
}

Answer 6

If you want to position the arrow of the select option on the right side, you could implement the following CSS:

select {
    text-align-last: right;
}

option {
    direction: rtl;
}

Answer 7

Answer №4

Check out this amazing demonstration: Demo http://jsfiddle.net/4RSGu/2/


  <select dir="rtl">
    <option value="0" selected="selected" style="text-align: right;" dir="rtl">EqualsTo</option>
    <option value="1" dir="rtl">LessThan</option>
    <option value="2" dir="rtl">GreaterThan</option>
    <option value="3" dir="rtl">LessThanEqualsTo</option>
    <option value="4" dir="rtl">GreaterThanEqualsTo</option>
    <option value="5" dir="rtl">Between</option>
</select>

Answer 8

Check out this amazing demonstration: Demo http://jsfiddle.net/4RSGu/2/


  <select dir="rtl">
    <option value="0" selected="selected" style="text-align: right;" dir="rtl">EqualsTo</option>
    <option value="1" dir="rtl">LessThan</option>
    <option value="2" dir="rtl">GreaterThan</option>
    <option value="3" dir="rtl">LessThanEqualsTo</option>
    <option value="4" dir="rtl">GreaterThanEqualsTo</option>
    <option value="5" dir="rtl">Between</option>
</select>

Answer 9

Answer №5

<select style="text-align-last: center;">
    <option value="0" dir="rtl" selected="selected"gt;EqualsTo</option>
    <option value="1" dir="rtl">LessThan</option>
    <option value="2" dir="rtl">GreaterThan</option>
    <option value="3" dir="rtl">LessThanEqualsTo</option>
    <option value="4" dir="rtl">GreaterThanEqualsTo</option>
    <option value="5" dir="rtl">Between</option>
</select>

Answer 10

<select style="text-align-last: center;">
    <option value="0" dir="rtl" selected="selected"gt;EqualsTo</option>
    <option value="1" dir="rtl">LessThan</option>
    <option value="2" dir="rtl">GreaterThan</option>
    <option value="3" dir="rtl">LessThanEqualsTo</option>
    <option value="4" dir="rtl">GreaterThanEqualsTo</option>
    <option value="5" dir="rtl">Between</option>
</select>

Answer 11

Answer №6

With just CSS, I have the ability to achieve this task.

select {
    width: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 2px 2px 2px 2px;
    border: none;
    background: transparent url(../images/dropdown.png) no-repeat 161px center;
    background-position-x: 98%;
}

select::-ms-expand {
    display: none;
}

You can find a working example on this link: http://jsfiddle.net/ajinkya34/nc548/

Answer 12

With just CSS, I have the ability to achieve this task.

select {
    width: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 2px 2px 2px 2px;
    border: none;
    background: transparent url(../images/dropdown.png) no-repeat 161px center;
    background-position-x: 98%;
}

select::-ms-expand {
    display: none;
}

You can find a working example on this link: http://jsfiddle.net/ajinkya34/nc548/

Right-align SELECT-OPTIONS text

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is there a way to determine whether my CSS style modifications will impact other web pages?

Using Ajax, the script triggers calls upon detecting keyup events on various input fields, each

Using JQuery to implement a click event for a current toggle functionality

Defining variables within a jQuery function

The search results in ajax live search are present, but unfortunately they are not displaying on

Sending an AJAX associative array to a PHP associative array

How to append double zeros to a number in Material UI Data Grid

Leveraging the power of Google Closure Templates alongside the versatility of

Extremely sluggish change identification in combination Angular application

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Creating a new database row dynamically with PHP, JavaScript, and AJAX

Prepare the writing area for input

"Using jQuery to add emphasis to a table row and remove it again

Creating a Music Bingo game to ring in the New Year

Connect the CSS file in React index.html to the Flask backend

Unable to retrieve the chosen option from the datalist

I am currently working on a one-page website that will feature both a Careers form and a Contact Us form. However, I am facing a challenge with the submission

What is the best way to retrieve the src value upon clicking on an image in a JavaScript function with multiple images displayed on

Node.js equivalent of hash_hmac

Position the Bootstrip 4 tooltip to automatically display on the right side