wake-up-neo.net

Richten Sie den Text SELECT-OPTIONS nach rechts aus

Dies sind die Screenshots der von mir entwickelten Form.

enter image description here

enter image description here

Ich möchte das Auswahlfeld im Formular so gestalten, dass der Text in den Optionen rechts ausgerichtet ist. Nach Auswahl der Option sollte der ausgewählte Text auch wie in der Abbildung unten angezeigt werden.

enter image description here

HTML Quelltext:

<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

Versuche dies. 

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

Versuchen Sie dies (könnte einfacher sein):

select{
   direction: rtl;
}
3
Djidel

Sie können dies versuchen, um den Pfeil der Auswahloption auf der rechten Seite zu behalten:

select {
    text-align-last: right;
}

option {
    direction: rtl;
}
1
Laiacy

Versuchen Sie folgendes: 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