Видалення закруглених кутів з елемента <select> в Chrome / Webkit

143

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

Жоден не працює.

Коли я вивчаю елемент в інструментах для розробників webkit, Computed Style все ще перераховує радіус як 5px. Але якщо я натискаю стрілку розширювача поруч із нею, щоб побачити специфіку, вона читатиме: element.style - 0px. І нижче це показує зовнішню специфікацію css, яку я дав 0px, а також специфікацію таблиці стилів користувача-агента 5px. І обидва ці два останні перекреслені, як і належить.

Будь-які ідеї?

select webkit css

— maxedison
джерело

Чи можете ви також опублікувати код? Ще краще, якщо ви опублікуєте це за допомогою jsfiddle.net.

— ngen

1

Я фактично не маю жодного радіуса кордону як стиль за замовчуванням у Chrome 10 на Win7, можливо, це інша версія чи ОС?

— Веслі Мерч

Немає жодних закруглених кутів у Chrome 12 у Windows 7.

— andyb

1

Треба було б згадати, що це на Mac OS X.

— maxedison

244

Це працює для мене (стилі перший вигляд не випадаючий список):

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

http://jsfiddle.net/fMuPt/

— antonj
джерело

179

Будь-який спосіб видалити закруглені кути, але тримати стрілки праворуч?

— Адам

3

вам потрібно додати стрілки, наприклад, як фонове зображення з позицією 100% 50% і атрибутом без повтору. Я також використовував закодоване зображення base64 у css, щоб уникнути додаткових запитів http.

— Карл Адлер

26

@Adam Це працювало для мене, якщо ви використовуєте border: 0та додаєте контур на кшталт:outline: 1px inset black; outline-offset:-1px

— Філіпе Перейра

1

@FilipePereira Приємно мені це подобається, хоча мені доведеться додати, що контур-зміщення не підтримується IE.

— Тім

6

Це усуває стрілки праворуч, що неприпустимо шкодить користувачеві. Натомість, стиліруйте спадне меню, background-color: #yourbgа border-style: noneпотім створіть поділ безпосередньо перед спадом із position: absoluteта border-bottom: 1px solid #youpickта display: inline. Стрілки збережені, UX неушкоджені, краще виправити.

— девіагнер

90

Просто моє рішення зі спадним зображенням (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='%23444' 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;
}

Я використовую завантажувальний інструмент, тому я використовував select.form-control
Ви можете використовувати select{або select.your-custom-class{замість цього.

— Афзал Хоссайн
джерело

4

Це єдина відповідь, яка вирішила мою проблему, хоча пам’ятайте про використання фону та фонового зображення, оскільки колір заливки svg замінить будь-який колір фону, який ви встановили для свого введення.

— Лукас М

Погоджено, будь ласка, проголосуйте за цю відповідь! Я не розумію інших голосів неповної відповіді. Будь-яка порада використовувати піктограму fontawesome замість inline svg?

— Ніколя Тері

FontAwesome - це набір іконок, але вам потрібна лише одна ікона. Тож вам потрібно витягнути одну з піктограм ФА, використовуючи такий інструмент, як icomoon.io. Після цього експортуйте цей значок у вигляді файлу svg чи png та зв’яжіть його зі своїм css

— Afzal Hossain

Гарне рішення, але в моїй ситуації я додав фоновий колір: білий;

— Віктор Богуцький

Зауважте, що при встановленні width: auto;додана стрілка svg накладає вміст вибору. Для цього потрібна додаткова підкладка в правій частині 16 пікселів. Однак ця підкладка помітна у всіх браузерах, що порушує дизайн інших браузерів. У мене поки немає рішення для цього ...

— Клаас ван дер Вейдж

31

Якщо ви хочете квадратних меж і все ще хочете маленьку стрілку розширювача, рекомендую це:

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

— jordan314
джерело

2

Проблема з цим полягає в тому, що ви переможете за замовчуванням outlineна :focus. Якщо ви збираєтесь використовувати цю відповідь, вам слід змінити select:focusстиль, щоб візуально показати, що selectелемент стає активним або :focusредагуваним при натисканні.

— Девін МакІнніс

@ jordan314 Ознайомтеся із закругленими кутами на цій фотографії . Межа-радіус: 0; не впливає на тег вибору. Принаймні, на Chrome OSX все одно.

— Джаммер

1

@ 7immy, що дивно, я також перебуваю на Chrome OS X, і ось скріншот згаданої

— jordan314

1

@ jordan314 Як щодо цього? jsfiddle.net/78xa6qud/2 . Я думаю, що ми можемо відмовитися від цього, якщо фон вибору та фон за ним одного кольору.

— Джаммер

@ 7immy ах так, я думаю, це застереження.

— jordan314

7

Тут є кілька хороших рішень, але для цього не потрібен 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>

Розгорніть фрагмент

— aleemb
джерело

6

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

Моє рішення полягало в тому, щоб просто наклеїти білий відбій (з рамкою радіус: 0px) позаду вибору. Встановіть його положення на абсолютне, його висоту на висоту вибору, і вам слід бути гарним!

— Рід Мартін
джерело

4

Рішення за допомогою спеціальної стрілки вниз, що використовується праворуч, використовує лише 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>

Розгорніть фрагмент

— Михай Крейша
джерело

Фонове розташування, яке працювало краще для моїх потреб, було таким: background-position: calc(100% - 4px) center, 100% center;Це переміщує стрілку в середину вибору та вгору вправо. Дякую велике за чудовий старт!

— Брендон

3

Один із способів зробити його простим і уникати возитися зі стрілками та іншими подібними можливостями - це просто розмістити його в діві з тим же кольором фону, що і тег Select.

— Денні Сантуш
джерело

1

Я погоджуюсь, це далеко не найпростіше і найнадійніше та портативне рішення.

— Джон Генкель

1

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

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

Потім створіть div безпосередньо перед спадом у вашому HTML:

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

І поділіть цей дів так:

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

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

— деггінер
джерело

1

Вставка-тінь робить теку.

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

Демо

— Марко Аллорі
джерело

0

Чомусь це насправді впливає на колір межі ??? Якщо ви користуєтесь стандартним кольором, кути залишаються округлими, але якщо змінити колір, то трохи закруглення відходить.

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

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

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

— mcallahan
джерело

Хм не впевнений у OSX. Просто спробував його ще раз у Windows (Chrome версія 45.0), і він все ще працює. Я думаю, щоб зробити проблему ще більш дивною, це конкретна платформа ...

— mcallahan

Це тому, що встановлення межі призводить до того, що веб-переглядач відображає сам комбобокс, а не використовує базовий, наданий ОС.

— Конг

0

добре, я отримав рішення. сподіваюся, що це може допомогти вам :)

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>

Розгорніть фрагмент

— Аміт
джерело

0

Далі йде спосіб зробити це;

Створіть фонове зображення, яке виглядає як спадне меню.
Вимкніть зовнішній вигляд браузера
Вирівняйте фонове зображення на обраному компоненті

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

— Джером Ентоні
джерело

-1

Я використав рішення jordan314, але потім для вибору додав клас "light-light". Якщо у вас є клас css-light 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>

— Ситті Муніра Абдул Разак
джерело

-8

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

— Девід форстнер
джерело

Питання про Chrome / Webkit.

— zishe

-10

Встановіть CSS як

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

Спробуйте, якщо це працює.

— AbhiRoczz ...
джерело