这些是我正在开发的表单的屏幕截图.
我要设计表单中的选择框,以使选项中的文本右对齐,并且在选择选项后,所显示的所选文本也应显示如下图所示.
<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>
解决方法:
尝试这个.
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;
}
原文地址:https://codeday.me/bug/20191010/1887060.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。