title: Bootstrap selection is rendered differently in firefox and chrome
body: <p>Bootstrap selection is rendered differently in firefox and chrome:</p>
  
  <p>Firefox:
  <a href="https://i.stack.imgur.com/HWEcR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HWEcR.png" alt="enter image description here"></a></p>
  
  <p>Chrome
  <a href="https://i.stack.imgur.com/GBuDP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GBuDP.png" alt="enter image description here"></a></p>
  
  <p>How do the two browsers render the same way?  Preferably in Chrome the way.</p>
  
  <p>My question is diferent from thid question 
  : <a href="https://stackoverflow.com/questions/17005588/twitter-bootstrap-getting-form-inputs-and-buttons-to-be-same-the-height-in-chro">Twitter Bootstrap: Getting Form Inputs and Buttons to be same the height in Chrome and Firefox</a></p>
  
  <p>because the problem is not width or height, the problem is  the triangle (in the right side) in select field, the way than the browser rendering this triangle is completely different, the answer of below question is not apply in the this case.</p>