Modify select element using CSS - html

Question

I'm trying to "cheat" the design of a select box to act as an inline tab/widget.
After done some research, I know it's hard to modify by CSS. But I think it's probably manageable.
So, based on the snippet, when I click the option, the text will turn white. Only once I click some white space, the text become black. Why is that and how to fix it?
Secondly, how to remove the right side arrow bar thing? I run this CSS on the staging site, chrome doesn't show the arrow bar, but mozilla got.
select {
width: 100%;
padding: 0;
border: none;
background-image: none;
font-size: 16px;
color: #868686;
}
select option {
display: inline;
float: left;
margin-right: 128px;
}
select option:hover {
cursor: pointer;
}
select option:checked {
background: linear-gradient(#fff, #fff);
background-color: #ffffff !important;
/* for IE */
color: #000000 !important;
font-weight: 600;
}
<select multiple="multiple">
<option value="">Latest</option>
<option value="52">New</option>
<option value="53">Pre-Owned</option>
<option value="115">Unworn</option>
</select>

Answer 1

Need to use this simple way.
please remove this css
background: linear-gradient(#fff, #fff);
background-color: #ffffff !important;
from select option:checked
Or need to hide scroll then you can add overflow: auto; into select
Let me know further clarification
select {
width: 100%;
padding: 0;
border: none;
background-image: none;
font-size: 16px;
color: #868686;
overflow: auto;
}
select option {
display: inline;
float: left;
margin-right: 128px;
}
select option:hover {
cursor: pointer;
}
select option:checked {
color: #000000;
font-weight: 600;
outline: none;
}
<select multiple="multiple">
<option value="">Latest</option>
<option value="52">New</option>
<option value="53">Pre-Owned</option>
<option value="115">Unworn</option>
</select>