Text-Align: Right on <Select> or <Option>

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/

Is it possible to center text in select box?

I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.

However, using a jQuery plugin, you could style the dropdown:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.

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

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>

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>

Bootstrap-select align only text right

for that, you should custom your CSS, so add the following style:

.bootstrap-select.btn-group .btn .filter-option {
text-align: right
}


Related Topics



Leave a reply



Submit