web-dev-qa-db-fra.com

Aligner le texte de SELECT-OPTIONS à droite

Ce sont les captures d'écran de la forme que je développe.

enter image description here

enter image description here

Je veux concevoir une zone de sélection dans le formulaire de telle sorte que le texte dans les options soit aligné à droite et qu'après avoir sélectionné l'option, le texte sélectionné affiché s'affiche également, comme indiqué dans l'image ci-dessous.

enter image description here

Code HTML:

<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>
javascriptjqueryhtmlcsshtml5
10
Ajinkya

Essaye ça. 

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

Essayez ceci (pourrait être plus simple):

select{
   direction: rtl;
}
3
Djidel

Vous pouvez essayer de garder la flèche de l’option de sélection à droite:

select {
    text-align-last: right;
}

option {
    direction: rtl;
}
1
Laiacy

Essayez ceci: 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>
1
Amit