title: how to fix customize select box using css?
body: <p>I'm trying to modify a default select box using CSS. I've already done it. But, some problems are happened at firefox. What I've done still now: </p>
  
  <p><a href="https://imgur.com/UpdhZUY" rel="nofollow noreferrer"><img src="https://i.imgur.com/UpdhZUY.jpg" /></a>
  It's the perfect result on all browser except firefox and IE <br /></p>
  
  <p>At firefox, there are the problems:
  <a href="https://imgur.com/lbejFxL" rel="nofollow noreferrer"><img src="https://i.imgur.com/lbejFxL.jpg" /></a></p>
  
  <p>(1) There are an unexpected border on the right side of the select box <br />
  (2) Padding of text of select box is much bigger than other input field.</p>
  
  <p>At IE, same problem happened. There are unexpected and much clear box at the right of the select box:
  <a href="https://imgur.com/B6GkH3Z" rel="nofollow noreferrer"><img src="https://i.imgur.com/B6GkH3Z.jpg" /></a></p>
  
  <p>How can I remove that unexpected line/box from firefox and IE. Also, what can be responsible for the padding problem at firefox?</p>
  
  <p>Well, I've used <a href="http://cssdeck.com/labs/styling-select-box-with-css3" rel="nofollow noreferrer">this tutorial's concept</a> to customize the select box using CSS only. And I've put my code at </p>
  
  <p>jsfiddle.net/w9kFc/1/</p>
  
  <p>(I can't add the select-icon image at jsfiddle from external link. So, I've taken the screenshot locally. But, I've given the <a href="https://i.imgur.com/6s7qnVr.png" rel="nofollow noreferrer">image's link</a> at the jsfiddle code. )</p>