Dropdown select within my header

Question

I am creating a monitoring system and I need the ability to select different amount of days. I want it styled kind of like this.

Previous [Dropdown here] Days

As you can see there is no border, I want the text to flow so if its 60 days there isn't lots of space to the right, when its 120/365 it looks okay but 2 digits has too much space on the right.

What is the best solution for this?

This is my HTML

<div class="col-md-12">
    <h4>Previous
    <select name="" id='daySelect'>
        <option disabled='disabled' selected>Select Day</option>     
        <option value="30">30</option>
        <option value="60">60</option>
        <option value="90">90</option>
        <option value="120">120</option>
        <option value="365">365</option>
    </select>
    Days
    (All Agencies)</h4>
</div>

This is my CSS

  #daySelect {
        width: 45px;
        border: 1px solid transparent;
        outline: none;
    }

    select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
    }

Fiddle

Normally, the solution would be to use `display: inline-block` but select box if not provided with a width calculates the width based on the longest value, so I would say to use JS unless some interest solution comes up. — Starx, Feb 08 '16 at 10:53
Looks like you need to use the standard input element along with the datalist element https://html.spec.whatwg.org/multipage/forms.html#the-datalist-element — , Feb 08 '16 at 10:53
I think this'll help you. Similar question. http://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html — WP Learner, Feb 08 '16 at 11:07
@Kieron606, Have a look at [this](http://jsfiddle.net/FSsG8/444/). It is a JS solution, but you might consider it. — Starx, Feb 08 '16 at 11:10

score 0 · Answer 1 · answered Feb 08 '16 at 11:21

i think this will help you

<!DOCTYPE html>
    <html>
    <head>
       <style type="text/css">
       select {
        -webkit-appearance: none;
        -moz-appearance : none;
        border:1px solid #ccc;
        border-radius:3px;
        padding:10px 10px;
        text-justify: auto;
        text-align: center;
    }
       }
       </style>
    </head>
    <body>
        <ul>
        <select id="sel" name="sel">
            <option value="o1">50</option>
            <option value="o2">100</option>
            <option value="o3">1000</option>

        </select>
        </ul>
        <div id="mySelect"></div>
    </body>
    </html>

score 0 · Answer 2 · answered Feb 08 '16 at 11:27

0

add text-align: center;

select 
{
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  text-align: center;
}

answered Feb 08 '16 at 11:27

Gomzy

431
4
14

score 0 · Answer 3 · edited Feb 16 '16 at 09:47

0

Set this css:

option{ width:auto;overflow:hidden;}

it always works for setting dynamic width to text like <p> tags.
Also you can set this for <select> tag.

edited Feb 16 '16 at 09:47

Mr Lister

45,515
15
108
150

answered Feb 08 '16 at 11:33

mina a.beigi

122
3
13

score -2 · Answer 4 · answered Feb 08 '16 at 11:00

-2

maybe some spaces? <option value="30">  30</option> - considering it's a select(not so customizable)

answered Feb 08 '16 at 11:00

sTx

1,213
13
32

1

This is an unreliable solution since font-family changes the space length, and if the number of digits for your value is changed, you will have to deal with new gap on the right. – Anwar Feb 08 '16 at 11:02

Dropdown select within my header

4 Answers4