Удаление закругленных углов из элемента <select>в Chrome / Webkit - PullRequest
Новая
       4

Удаление закругленных углов из элемента <select>в Chrome / Webkit

125 голосов
/ 25 апреля 2011

Таблица стилей пользовательского агента для Chrome дает радиус границы 5 пикселей для всех углов элемента <select>. Я попытался избавиться от этого, применив радиус 0px через мою внешнюю таблицу стилей, а также встроенный в сам элемент; Я пробовал и border-radius:0px, и -webkit-border-radius:0px;, и я попробовал еще более конкретный border-top-left-radius:0px (вместе с эквивалентом -webkit).

Никто не работает.

Когда я проверяю элемент в инструментах разработчика webkit, вычисляемый стиль по-прежнему отображает радиус в 5 пикселей. Но если я щелкну стрелку расширителя рядом с ним, чтобы увидеть подробности, она будет выглядеть следующим образом: element.style - 0px. И ниже это показывает внешнюю спецификацию css, которую я дал 0px, наряду со спецификацией таблицы стилей user-agent 5px. И оба эти последние два перечеркнуты, как и должно быть.

Есть идеи?

Ответы [ 14 ]

223 голосов
/ 25 апреля 2011

Это работает для меня (стили первого появления, а не выпадающий список): 

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

http://jsfiddle.net/fMuPt/

76 голосов
/ 26 мая 2016

Просто мое решение с выпадающим изображением (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;
}

Альтернатива (так как выше не работает с последним 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;
}

Я использую бутстрап, поэтому я использовал select.form-control
Вместо этого вы можете использовать select{ или select.your-custom-class{.

29 голосов
/ 13 мая 2015

Если вы хотите иметь квадратные границы и все еще хотите маленькую стрелку расширения, я рекомендую это: 

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
7 голосов
/ 18 августа 2017

Здесь есть несколько хороших решений, но для этого не нужен SVG, он сохраняет границу с помощью outline и устанавливает ее на кнопке. 

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>
5 голосов
/ 24 июня 2015

Хотя верхний ответ удаляет границу, он также удаляет стрелку, что делает его чрезвычайно трудным, если не невозможным, для пользователя идентифицировать элемент как элемент выбора.

Мое решение состояло в том, чтобы просто вставить белый div (с border-radius: 0px) за выбранным. Установите его положение на абсолютное, его высоту на высоту выбора, и вы должны хорошо идти!

2 голосов
/ 05 сентября 2018

Решение с пользовательской правой стрелкой раскрывающегося списка, использует только CSS (без изображений) 

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>
1 голос
/ 24 февраля 2018

Один из способов сохранить простоту и избежать путаницы со стрелками и другими подобными функциями - просто поместить его в элемент div с тем же цветом фона, что и у тега select.

1 голос
/ 25 сентября 2016

Вставка box-shadow делает свое дело. 

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

Демо

0 голосов
/ 16 сентября 2018

Я использовал решение jordan314, но затем добавил класс «border-light» для выбора.Если у вас есть класс border-light, определенный в css, вы можете использовать его напрямую.Он просто определяет границу как белый).Я изменил границу на квадрат / убрал радиус и сохранил стрелку.

Вот что я сделал: 

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

, если у вас нет предопределенного пограничного света, просто добавьте в свой CSS: 

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

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>
0 голосов
/ 10 июня 2016

Избегать стрелок следует избегать.Решение, которое сохраняет стрелки раскрывающегося списка, состоит в том, чтобы сначала удалить стили из раскрывающегося списка: 

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

Затем создать div непосредственно перед раскрывающимся списком в вашем HTML: 

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

И стилизовать div какthis: 

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

Отображение на экране будет препятствовать переходу div к новой строке, позиция absolute удаляет его из потока страницы.Конечным результатом является хорошее чистое подчеркивание, которое вы можете стилизовать по своему усмотрению, и ваш раскрывающийся список по-прежнему ведет себя так, как и ожидал пользователь.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...