How to shift the alignment of text in a select dropdown toward the top and left with CSS?

Question

I'm trying to display a dropdown over top of a spreadsheet-like table with JavaScript and CSS but am having issues with the alignment. I've set all borders, margins and paddings to zero, however I have been unable to determine how to move the text (the default text, prior to a drop-down list being displayed) toward the top-left corner. I've used text-indent: -3px; to get it to move left, but there is 3px-5px gap (clearly visible with background-color: #888888; and not just the edge of the select's boundaries) that clips the text on the left.

Does anyone know how to shift the text position of a select-based HTML dropdown to the top-left?

Edit:

Adding computed styles from Chrome to demonstate the difference between a text box and a dropdown with screenshot.

Textbox CSS:

-webkit-border-image: none;
-webkit-line-break: after-white-space;
-webkit-nbsp-mode: space;
-webkit-user-modify: read-write;
border-bottom-color: rgb(37, 66, 100);
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(37, 66, 100);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(37, 66, 100);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(37, 66, 100);
border-top-style: none;
border-top-width: 0px;
color: rgb(37, 66, 100);
cursor: auto;
display: block;
font-family: Calibri, sans-serif;
font-size: 15px;
height: 18px;
left: 204px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(37, 66, 100);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
top: 21px;
white-space: pre;
width: 73px;
word-wrap: break-word;
z-index: 99;

Select CSS:

-webkit-appearance: menulist-button;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-rtl-ordering: logical;
-webkit-user-select: none;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(37, 66, 100);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(37, 66, 100);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(37, 66, 100);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(37, 66, 100);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(37, 66, 100);
cursor: default;
display: block;
font-family: Calibri, sans-serif;
font-size: 15px;
height: 16px;
left: 281px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(37, 66, 100);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: start;
text-indent: -3px;
text-shadow: none;
text-transform: none;
top: 22px;
white-space: pre;
width: 135px;
word-spacing: 0px;
writing-mode: lr-tb;
z-index: 99;

Screenshot of textbox: Screenshot of select:

Answer 1

I'm having the same exact situation as you... Sadly the only thing I could come up with that helped align the text a little more properly was adding:  

<select name='something'>
<option value='nan'>&nbsp;&nbsp; Some Text Here</option>
<option value='nan'>&nbsp;&nbsp; Some Text Here</option>
</select>

Answer 2

Just to rule out the basics, have you tried:

   option, select {
      text-align: left;
      vertical-align: top;
   }