Question

这些是我正在开发的表单的屏幕截图。

enter image description here

我想在表格中设计选择框，使选项中的文字右对齐，选择选项后，所选文字也应显示如下图所示。

enter image description here

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>

Answer 1

试试这个。

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

Answer 2

试试这个（可能更简单）：

select{
   direction: rtl;
}

Answer 3

试试这个：演示 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>

Answer 4

您可以尝试这样做以保持右侧选择选项的箭头：

select {
    text-align-last: right;
}

option {
    direction: rtl;
}

Answer 5

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

Answer 6

我只能用CSS做到这一点。

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

这是小提琴：http://jsfiddle.net/ajinkya34/nc548/

将SELECT-OPTIONS文本对齐到右侧

6 个答案: