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


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

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

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

какие идеи?

14 112

14 ответов:

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

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

http://jsfiddle.net/fMuPt/

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

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

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

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

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

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

некоторые хорошие решения здесь, но это не нужно 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>

вставка box-тень делает трюк.

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

демо

по какой-то причине это на самом деле зависит от цвета границы??? При использовании стандартного цвета углы остаются закругленными, но если вы измените цвет даже немного, округление исчезнет.

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

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

https://jsfiddle.net/hLg70o70/2/

ну, я получил решение. надеюсь, что это может помочь вам :)

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>

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

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

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

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

и стиль div, как это:

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

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

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

решение с пользовательской правой стрелкой раскрывающегося списка, использует только 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>

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

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

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

Если у вас нет предопределенного border-light, просто добавьте в свой css:

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

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

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

установите CSS как

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

попробовать, если это работает.