Removing rounded corners from a <select> element in Chrome/Webkit

Answer 1

Following is the way to do it;

1. Create a background image that looks like a dropdown.
2. Switch off browser appearance
3. Align the background image on the select component

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }