Home Ask Login Register

Developers Planet

Your answer is one click away!

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">
    <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>
    (All Agencies)</h4>

This is my CSS

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

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



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>
       <style type="text/css">
       select {
        -webkit-appearance: none;
        -moz-appearance : none;
        border:1px solid #ccc;
        padding:10px 10px;
        text-justify: auto;
        text-align: center;
        <select id="sel" name="sel">
            <option value="o1">50</option>
            <option value="o2">100</option>
            <option value="o3">1000</option>

        <div id="mySelect"></div>

Gomzy February 2016

add text-align: center;

  -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


Leave an answer

Quote of the day: live life