Question

-4

Align SELECT-OPTIONS text to right

rated 0 times [ 3] [ 7] / answers: 1 / hits: 31377 / 10 Years ago, fri, june 27, 2014, 12:00:00

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

enter

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

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leog

Add To Favorites

Follow

Total Points: 225

Total Questions: 113

Total Answers: 118

Location: Oman

Member since Wed, Apr 12, 2023

1 Year ago

leog questions

1 Why using toRef(props) and is it good idea to change their value in CompositionAPI?

Fri, Oct 1, 21, 00:00, 3 Years ago

1 Material-UI pickers trigger validation on blur not on change?

Sun, Sep 13, 20, 00:00, 4 Years ago

1 What's the difference between onClick ={ () => function()} and onClick = {function()}?

Thu, Jul 16, 20, 00:00, 4 Years ago

1 Detect an Electron instance via JavaScript

Mon, May 11, 20, 00:00, 4 Years ago

1 changing theme with react native elements not working?

Sat, Apr 18, 20, 00:00, 4 Years ago

View All

answered 10 Years ago sherryd · Accepted Answer

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;

}