Normally when you click on a select element, the option you have selected is highlighted by default and as you scroll to other options the highlight follows the pointer. For some reason all of my selects are broken, when you scroll to other options the highlight jumps back to the original selected option and a small bit of highlight is visible underneath the element you are on on the outside margins. When you click on an option things work normally and it gets selected even though the highlight is visually being shown somewhere else, but I can't figure out whats causing it to act this way.
Image of problem:
In this example "people" was the selected option, and I have the pointer over "clubs", as you can see its very hard to tell what you are selecting. This is happening in both Chrome and Firefox and in IE the selects won't even let me pick a different option at all, as soon as the dropdown opens it closes again (selecting what you already picked).
I have been browsing for hours trying to find a fix and all I have found is this question which describes the same issue in chrome specifically. Very weird Chrome behavior in an open (focused) "select" element
Unfortunately this did not help me because I am not using any javascript on the select elements at all (I removed it as part of trying to figure out what the problem is). I also removed the selected="true" from default selections and ::selection styling on the off chance they somehow related to the problem.
Here is one of the broken selects (bulk of the css is below this with explanation above):
select
{
font-family: 'CabinSemiBold';
font-size: 14px;
border-radius:3px;
border: 1px solid #000;
color:#000000;
}
#reviewsort
{
width: 110px;
height:30px;
}
<div class="sitecontentwrapper" >
<div class="sitecontentrow">
...
<div class="sitecontentcell">
<div class="nowrap inlineblock">
....(omitted "Sort By: " label)...
<select name="reviewsort" id="reviewsort" class="inlineblock">
<option value="date">Date</option>
<option value="helpful">Most Helpful</option>
</select>
</div>
</div>
....
</div>
</div>
Where things are wrapped and centered using auto margin and content is designed to shift as the screen size changes because it's being treated as if it were inside a giant table. .inlineblock and .nowrap are used when areas should not wrap or must stay together when wrapping and the rest of the content in a "cell" wraps as needed extending the "row" height. I am fairly new to responsive design and I am sure there are better ways to handle responsive content shifting, but that's not really the point of the question. I am mostly including this in case it is causing the problem somehow as I have tried everything else I can think of and cant figure out how selects are being broken.
.sitecontentwrapper
{
max-width:1400px;
margin-left: auto;
margin-right: auto;
padding: 0px 50px;
position:relative;
display:table;
border:0px;
height:100%;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.sitecontentrow
{
display:table-row;
}
.sitecontentcell
{
display:table-cell;
vertical-align: top;
}
.nowrap
{
white-space: nowrap;
}
.inlineblock
{
display:inline-block;
vertical-align:top;
position: relative;
}
Can anyone come up with a reason why any of this would be causing selects to not work properly? Or point me in the direction of a way to fix the behavior?
EDIT: Apparently the fiddle example from the question I linked is working properly in chrome for some people (not me) so I have removed it as a visual reference for explaining what is happening in my code and attached an image instead. Really hoping it helps as this is a very strange issue
EDIT 2: I found the problem and have added the answer below so I can close the question. Instead of just leaving the answer here.