CSS difference on mac and windows - html

Question

I have some CSS applied to a few divs. It looks all good on windows, but it behaves differently on Mac on the event of mouse over.
The behavior can be seen here. If you could manage opening it on Mac and on Windows you will notice the difference.
I would appreciate if some can tell me how can i make it behave similar as it behaves on windows. Again, i want it to behave as it behaves on Windows.
I will show my code here as well.
The html
<div class="goal" >
<div class="top-layer" >
<div class="component">
<select class="component-select">
<option value="">select me </option>
<option value="">option one</option>
<option value="">option two</option>
<option value="">option three</option>
</select>
<span id="width_tmp"></span>
</div>
<div class="period" >
<select class="period-select">
<option value="">something</option>
</select>
<span id="width_tmp"></span>
</div>
<div class="close clickable" >X</div>
</div>
and the CSS,
.noselect, .clickable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.clickable {
cursor: pointer;
/*border: 1px solid transparent;*/
}
.clickable:hover {
/*border: 1px solid #4D7994;*/
background: #3f6379;
}
[contenteditable="true"].single-line {
white-space: nowrap;
overflow: hidden;
display: inline-block;
margin-bottom: -7px;
height: 12px;
max-width: 60px;
}
[contenteditable="true"].single-line br {
display:none;
}
[contenteditable="true"].single-line * {
display:inline;
white-space:nowrap;
}
.goal {
position: relative;
background: #5A8EAE;
width: 364px;
height: auto;
color: #F4F7F9;
float: left;
margin-right: 14px;
margin-bottom: 14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.goal span[contenteditable=true] {
padding: 5px;
border: 1px solid #5A8EAE;
padding-left: 2px;
}
.goal span[contenteditable=true]:focus {
background-color: white;
color: black;
border: 1px solid #5A8EAE;
min-width: 10px;
}
.top-layer{
width: 100%;
height: 33px;
float: left;
font-size: 12px;
font-weight: bold;;
}
.component{
float: left;
width: 63%;
padding: 2.5% 3% 3% 2%;
}
.period{
float: left;
padding-top: 10px;
}
.close{
float: right;
padding: 2.8%;
border-left: 1px solid #9FBDCF;
}
select.period-select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
border-radius: 2px;
background-color: #5A8EAE;
color: white;
font-weight: bold;
width:auto;
direction: ltr;
float: right;
font-size: 12px;
padding: 3px 0;
margin-top: -6px;
}
select.period-select:hover, select.component-select:hover {
-webkit-appearance: menulist;
background-color: #3f6379;
color: white;
}
select.component-select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
background-color: #5A8EAE;
font-size: 12px;
font-weight: bold;
width:240px ;
padding: 3px 0;
margin-top: -6px;
padding-left:0px;
margin-left:0px;
}
select:hover {
cursor: pointer;
/*background: #0088cc url(img/select-arrow.png) no-repeat 90% center;*/
}