In the process of developing a monitoring system, I am in need of a feature that allows users to select varying numbers of days. Here is the desired style:
Previous [Dropdown Selection] Days
https://i.sstatic.net/ysk6X.png
Ideally, I do not want any borders around the selection, and the text should adjust dynamically to avoid unnecessary spacing. For instance, when selecting 60 days, there should be minimal extra space to the right. However, when selecting 120 or 365 days, the spacing appears acceptable, but with 2-digit selections, there is excess space on the right.
What would be the most effective solution for this issue?
This is the HTML code I am currently using:
<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>
Here is the CSS code I have implemented:
#daySelect {
width: 45px;
border: 1px solid transparent;
outline: none;
}
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}