CODEWITHSUNDEEP
javascriptjquerycsshtml
Ajinkya
Ajinkya

Reputation: 1711

Align SELECT-OPTIONS text to right

These are the screen shots of the form I am developing.

enter image description here

enter image description here

I want to design select box in form in such a way that text in options is right aligned and after selecting the option it selected text shown also should be displayed as shown in below image.

enter image description here

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>

Upvotes: 12

Views: 32375

Answers (6)

Warf
Warf

Reputation: 311

<select style="text-align-last: right;">
    <option value="0" dir="rtl" selected="selected">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>

Upvotes: 0

Djidel
Djidel

Reputation: 397

Try this CSS:

select{
   direction: rtl;
}

Upvotes: 8

Laiacy
Laiacy

Reputation: 1610

You can try this to keep the arrow of the select option on the right side:

select {
    text-align-last: right;
}

option {
    direction: rtl;
}

Upvotes: 2

Ajinkya
Ajinkya

Reputation: 1711

I could do it just with CSS alone.

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

This is fiddle for it: http://jsfiddle.net/ajinkya34/nc548/

Upvotes: -3

Amit
Amit

Reputation: 823

Try this : 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>

Upvotes: 1

PrashantJ
PrashantJ

Reputation: 457

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

Upvotes: 8

Related Questions