Удалить круглую границу по умолчанию элемента <select> в браузере Mac OS: Chrome

В элементе 'select' я не добавил свойство border в CSS из него, а также добавил в него следующий CSS

    .select
     {
      -webkit-appearance: none;
      -webkit-border-radius: 0px;
     }

хотя он показывает мне круглую границу в Chrome (Mac OS), почему это так, как я могу ее преодолеть?

Ответ 1

Вы можете использовать это,

.select{ 
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;   
   -webkit-border-radius: 0;  /* Safari 3-4, iOS 1-3.2, Android 1.6- */    
   -moz-border-radius: 0;  /* Firefox 1-3.6 */     
   border-radius: 0;  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}

Ответ 2

Хотя это старый вопрос. Я попытался держать стрелку на правой стороне.

select {
    color: #fff;
    background: #17406B;
    border: solid 7px #17406B;
    outline: #17406B solid thick;
    outline-offset: -5px;
}

Ответ 3

Это должно работать:

select {
    background: #fff;
    color: #2dccd3;
    outline: #ffffff solid thick;
    outline-offset: -5px;
    -webkit-border-radius: 0px !important;
}

Ответ 4

Просто используйте

border: 1px ridge rgb(169, 169, 169);

радиус границы будет 0px

решение заключается в изменении пограничного стиля на ridge.

быть счастливым