title: CSS difference on mac and windows
body: <p>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. </p>
  
  <p>The behavior can be seen <a href="http://codepen.io/shaonline/pen/adMJQM" rel="nofollow">here</a>. If you could manage opening it on Mac and on Windows you will notice the difference.  </p>
  
  <p>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. </p>
  
  <p>I will show my code here as well. </p>
  
  <p>The html </p>
  
  <pre><code>&lt;div class="goal" &gt;
  &lt;div class="top-layer" &gt;
      &lt;div class="component"&gt;
          &lt;select class="component-select"&gt;
              &lt;option value=""&gt;select me &lt;/option&gt;
            &lt;option value=""&gt;option one&lt;/option&gt;
            &lt;option value=""&gt;option two&lt;/option&gt;
            &lt;option value=""&gt;option three&lt;/option&gt;              
          &lt;/select&gt;
          &lt;span id="width_tmp"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="period" &gt;
        &lt;select class="period-select"&gt;
              &lt;option value=""&gt;something&lt;/option&gt;                
          &lt;/select&gt;
          &lt;span id="width_tmp"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="close clickable" &gt;X&lt;/div&gt;
  &lt;/div&gt;        
  </code></pre>
  
  <p></p>
  
  <p>and the CSS, </p>
  
  <pre><code>.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;*/
  }
  </code></pre>