Align an element to right in Select Option

Question

How can I align the numbers in the following option example to the right (or equal tab spaces) using css or simple jQuery? As I understand, its invalid syntax to use any span or div inside the option, so how can this be done?

(These are dynamic options, so I cannot just add  )

Desired output:

Test            1.0
Example         2.0
x y z           5

Select:

<select>
  <option>Test 1.0</option>
  <option>Example 2.0</option>
  <option>x y z 5</option>
</select>

https://jsfiddle.net/0d9p78qz/

is this what you want : https://jsfiddle.net/kc7xohqd/ -/- https://jsfiddle.net/kc7xohqd/1/ ? if yes, then a duplicate of : https://stackoverflow.com/questions/35654636/text-align-center-placeholder-text-in-select/35655402#35655402 — G-Cyrillus, Sep 02 '20 at 10:15
I think this is a duplicate question. Check out this [link](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) — Siona Fernandes, Sep 02 '20 at 10:17
Does this answer your question? [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) — Siona Fernandes, Sep 02 '20 at 10:18
Does this answer your question? [text-align: center placeholder text in select](https://stackoverflow.com/questions/35654636/text-align-center-placeholder-text-in-select) — Rayees AC, Sep 02 '20 at 10:39

score 0 · Answer 1 · answered Sep 02 '20 at 10:27

As you mentioned you cannot put any tags inside an option element as it is not valid HTML. Because of this, there is no way to separate the string.

option 1: you could use javascript to space the strings accordingly.

option 2: create a custom select element similar to this:

var html=[];

$('#test_select option').each(function(i){
   html.push('<li rel="'+$(this).val() +'">'+$(this).text()+'</li>');
});

$('.custom-select ul').html(html.join(''))







/* cache main list elements so each doc click isn't a DOM search*/
var $lists = $('.custom-select');

$lists.live('click',function(e) {
    e.stopPropagation();
    $lists.not(this).find('ul:visible').hide()
    var $tgt = $(e.target);
    $(this).find('ul').slideToggle('fast');
    if ($tgt.is('li')) {
        $(this).find('span').html($tgt.html());
        var value=$tgt.attr('rel');
        $('#test_select').val( value);
    }
    
    
})

$(document).click(function(e) {
    $lists.find('ul:visible').hide();
});

.custom-select {
    position: relative;
    display: inline-block;
    font-family: sans-serif;
    font-size: 93%;
    margin: 30px 50px;
}

.custom-select span {
    display: inline-block;
    min-width: 180px;
    color: #FFF;
    background-color: #333;
    padding: 5px;
    cursor: pointer;
}

.custom-select ul {
    position: absolute;
    display: none;
    border: 1px solid #333;
    width: 99%;
    max-height: 200px;
    overflow: auto;
    z-index: 10000;
}

.custom-select ul li {
    padding: 5px;
    border-bottom: 1px solid #333;
    cursor: pointer;
}

.custom-select ul li:hover {
    background-color: #666;
    color: #FFF;
}

.custom-select ul li:last-child {
    border-bottom: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div style="select_wrap">
 <select id="test_select"><option value="1">List Item 1</option>
        <option value="1">List Item 2</option>
        <option value="2">List Item 3</option>
        <option value="3">List Item 4</option>
        <option value="4">List Item 5</option>
        <option value="5">List Item 6</option>
        <option value="6">List Item 7</option>
        <option value="7">List Item 8</option>
        <option value="8">List Item 9</option>
        <option value="9">List Item 10</option>
        <option value="10">List Item 11</option>
        <option value="11">List Item 12</option>
        </select>
   
</div>



<div class="custom-select">
    <span>Select Option</span>
    <ul>        
    </ul>
</div>

Then li can be styled and receive any tags or pseudo element . ex : flex+pseudo http://jsfiddle.net/mqdL12jo/ looks closer to the requirement ;) where the pseudo can be instead any tag wrapping a number — G-Cyrillus, Sep 02 '20 at 10:33
@G-Cyrillus correct! and yes, your jsfiddle looks closer to the requirement :) — Stanley, Sep 02 '20 at 10:34

Align an element to right in Select Option

1 Answers1