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
CSS Replacement for <Div Align="Center">
How to Apply CSS and Styling to a React Component
Arrange 2 Items Per Row Using Flexbox
Firebug-Like Debugger for Google Chrome
HTML Form File Uploads Doesn't Upload File
How to Calc() The Number of Rows in a Grid Template
Why Does Border: 5Px Dashed Not Come Out as Dashed in Firefox
How to Test a Website for Retina on Windows Without an Actual Retina Display
Fixed Positioning/Z-Index Issue in Mobile Safari
How to Have Perfectly Centered Navigation Bar with Equally Wide Links
How to Make a Text Input Non-Editable
Yet Another HTML/CSS Layout Challenge - Full Height Sidebar with Sticky Footer
Keep Padding from Making The Element Bigger
Inject <Input> in Innerhtml Angular 2
Browser Doesn't Scale Below 400Px
How to Get The Bullet Points of a <Ul> to Center with The Text