Align Select-Options Text to Right

text-align: right on select or option

You could try using the "dir" attribute, but I'm not sure that would produce the desired effect?

<select dir="rtl">
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>

Demo here: http://jsfiddle.net/fparent/YSJU7/

Align SELECT-OPTIONS text to right

Try this.

http://jsfiddle.net/MfDTU/1/

HTML

<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

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

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

}

.selectbox select {
z-index: 10;
position: relative;
border: none;
background: none;
outline: none;
opacity: 0;
height: 27px;
-webkit-appearance: none;
filter: alpha(opacity=0);
width: 100%;
cursor: pointer;

}

.selectbox select option {
padding: 3px;
text-align:right;

}

.selecttext {
z-index: 9;
position: absolute;
right: 25px;
display: inline-block;
*display: inline;
zoom: 1;
padding-top: 4px;
background: transparent;
color: #000;
text-align:right;

}

.select-arrow {
background: url(myarrow.png) no-repeat 50% 50%;
position: absolute;
display: inline-block;
*display: inline;
zoom: 1;
height: 100%;
width: 24px;
top: 0;
right: 0;
}

Align text of select option to the right

Try with direction attribute and use the direction right to left i.e. rtl

<select dir="rtl">
    <option>Text</option>
</select>

Js Fiddle Demo

Update : if you want to keep arrow icon to right with options to be aligned right then you can just set the property on option instead of select

option{
    direction:rtl;
}

Js Fiddle Demo 2

Text-Align right select with text that starts with a number

Here is proper way with your own code

This will work for you -

Just use direction: ltr; in your <option> and all will work fine:

.form__row select option {
    direction: ltr;
}

body {  background-color: #000000;}
.form {  background-color: #ffffff;  width: 400px;}
.form__row {  border: 1px solid;  margin 1rem auto 0 auto;  display: flex;  justify-content: space-between;}
.form__row>div {  flex-basis: 50%;  padding-top: 0.5rem;  padding-bottom: 0.5rem;}
.form__row .label {  padding-left: 1rem;}
.form__row .input {  padding-right: 1rem;  text-align: right;}
.form__row select {  width: 100%;  appearance: none;  -webkit-appearance: none;  border-radius: 0;  background-color: inherit;  direction: rtl;}
.form__row select option {    direction: ltr;}.form__row input {  text-align: right;  width: 100%;}

<div class=form>  <div class="form__row">    <div class="label">Your Name : </div>    <div class="input">      <input type="text" placeholder="your name" value="This aligns right nicely">    </div>  </div>  <div class="form__row">    <div class="label">How long : </div>    <div class="input">      <select>          <option value="1">1 Month</option>          <option value="2">2 Months</option>          <option value="1">Prefixed 1 Month</option>          <option value="2">Prefixed 2 Months</option>        </select>    </div>  </div></div>

How to right align some part of text in option in select

Here's one approach to achieve that:

Using select2's configuration options: templateResult, templateSelection and escapeMarkup, the dropdown list can be manipulated as per the requirements.

I'm using sample data here:

$('#example').select2({  data: [     {id: 'test1', text: 'January', subText: "Test1"},      {id: 'test2', text: 'February', subText: "Test2"},     {id: 'test3', text: 'March', subText: "Test3"}          ],    placeholder: 'Select a month',    escapeMarkup: function (markup) {     return markup;    },    templateResult: function (d) {     return '<span>'+d.text+'</span><span class="pull-right subtext">'+d.subText+'</span>';    },    templateSelection: function (d) {     return d.text + ' ( ' + d.subText + ')';    }}).val('test2').trigger('change');

.pull-right {  float: right!important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/><script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="example" multiple="multiple" style="width: 300px"></select>

How to align text in HTML select to the right?

Use "text-align-last" instead

select {
  text-align-last: right;
}

/* for demonstration purpose only */
select {
  width: 50vw;
}

<select>
  <option><=</option>    
</select>

Aligning part of a select option's text on the left and part on the right?

The option element content is taken as plain text (no tags are recognized), so there is no direct way to do it. As a clumsy workaround, you can hand-format the options using a monospace font and use no-break spaces:

    <style>    select, option { font-family: Consolas,  monospace; }    </style>    <select>    <option>option 1          0.5    <option>option 2          1.5    <option>one more option 110.5    </select>

---

Related Topics