Kieron606 February 2016

Dropdown select within my header

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

dropdown style

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

Answers


sTx February 2016

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


abhay vyas February 2016

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>


Gomzy February 2016

add text-align: center;

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


mina a.beigi February 2016

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.

Post Status

Asked in February 2016
Viewed 3,667 times
Voted 7
Answered 4 times

Search




Leave an answer