Eliminar esquinas redondeadas de un elemento en Chrome / Webkit

Solo mi solución con la imagen desplegable (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

Alternativa (ya que la anterior no funciona con la última versión de firefox)

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    background-size: 16px;
}

Estoy usando bootstrap por eso usé select.form-control
Puedes usar select{ o select.your-custom-class{ en su lugar.

Si quieres bordes cuadrados y aún quieres la pequeña flecha expansor, te recomiendo esto:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

Mientras que la respuesta superior elimina el borde, también elimina la flecha, lo que hace que sea extremadamente difícil, si no imposible, para el usuario identificar el elemento como una selección.

Mi solución fue simplemente pegar un div blanco (con border-radius:0px) detrás de la selección. Establezca su posición en absoluto, su altura a la altura de la selección, y usted debe ser bueno para ir!

Algunas buenas soluciones aquí, pero esta no necesita SVG, conserva el borde a través de outline y lo establece al ras en el botón.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}

<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

Caja de inserción-sombra hace el truco.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

Demo

¿Por alguna razón se ve afectado por el color del borde??? Cuando se utiliza el color estándar de las esquinas se mantienen redondeadas, pero si cambia el color aunque sea ligeramente el redondeo desaparece.

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

Https://jsfiddle.net/hLg70o70/2 /

Bueno, tengo la solución. espero que te pueda ayudar:)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }

<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

Se debe evitar eliminar las flechas. Una solución que conserva las flechas desplegables es eliminar primero los estilos del menú desplegable:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

Luego crea div directamente antes del menú desplegable en tu HTML:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

Y el estilo del div como este:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

Display inline evitará que el div vaya a una nueva línea, position absolute lo elimina del flujo de la página. El resultado final es un subrayado limpio y agradable que puede diseñar como desee, y su menú desplegable aún se comporta como el usuario esperaría.

Una forma de mantenerlo simple y evitar jugar con las flechas y otras características similares es simplemente alojarlo en un div con el mismo color de fondo que la etiqueta select.

Solución con flecha desplegable a la derecha personalizada, utiliza solo css (sin imágenes)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}

<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

Usé la solución de jordan314, pero luego agregué la clase "border-light" para seleccionar. Si tiene definida la clase border-light por defecto en css, puede usarla directamente. Simplemente define el borde como blanco). Cambié el borde a cuadrado / eliminar el radio, y mantuve la flecha.

Esto es lo que hice:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

Si no tiene la luz de borde predefinida, simplemente agregue su css:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

[1]} Firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

Establecer el CSS como

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

Intente si funciona.