Usuwanie zaokrąglonych rogów z elementu <select> w Chrome / Webkit

143

Arkusz stylów klienta użytkownika dla przeglądarki Chrome zapewnia promień obramowania wynoszący 5 pikseli we wszystkich rogach <select>elementu. Próbowałem się tego pozbyć, stosując promień 0px w moim zewnętrznym arkuszu stylów, a także wbudowany w sam element; Wypróbowałem oba border-radius:0pxi -webkit-border-radius:0px;wypróbowałem jeszcze bardziej szczegółowy border-top-left-radius:0px(wraz z jego odpowiednikiem -webkit).

Żaden nie działa.

Kiedy badam element w narzędziach programistycznych webkit, styl obliczony nadal podaje promień jako 5px. Ale jeśli kliknę strzałkę ekspandera obok niego, aby zobaczyć szczegóły, brzmi: element.style - 0px. A poniżej pokazuje zewnętrzną specyfikację css, którą podałem, 0px, wraz ze specyfikacją arkusza stylów agenta użytkownika wynoszącą 5 pikseli. Oba te ostatnie są przekreślone, tak jak powinny.

Jakieś pomysły?

select webkit css maxedison
źródło

Czy możesz również wysłać kod? Jeszcze lepiej, jeśli opublikujesz go za pomocą jsfiddle.net.

ngen

1

Właściwie nie mam żadnego border-radius jako domyślnego stylu w Chrome 10 na Win7, może to jest inna wersja lub system operacyjny?

Wesley Murch,

Brak zaokrąglonych rogów również w Chrome 12 na Windows 7.

andyb,

1

Powinienem był wspomnieć, że jest na Mac OS X.

maxedison

244

To działa dla mnie (style pierwszy wygląd, a nie lista rozwijana):

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

http://jsfiddle.net/fMuPt/

antonj
źródło

179

Czy jest jakiś sposób, aby usunąć zaokrąglone rogi, ale zachować strzałki po prawej stronie?

Adam

3

musisz dodać strzałki np. jako obraz tła z pozycją 100% 50% i atrybutem bez powtórzeń. Użyłem również obrazu zakodowanego w base64 w css, aby uniknąć dodatkowych żądań http.

Karl Adler,

26

@Adam Udało mi się, jeśli użyjesz border: 0i dodasz konspekt, taki jak:outline: 1px inset black; outline-offset:-1px

Filipe Pereira

1

@FilipePereira Nice Podoba mi się, chociaż muszę dodać, że przesunięcie konturu nie jest obsługiwane przez IE.

Tim,

6

Eliminuje to strzałki po prawej stronie, co w niedopuszczalny sposób szkodzi użytkownikowi. Zamiast tego nadaj styl menu rozwijanemu, background-color: #yourbga border-style: nonenastępnie utwórz element div bezpośrednio przed nim za pomocą position: absolutei border-bottom: 1px solid #youpicki display: inline. Strzały zachowane, nienaruszone UX, lepsza naprawa.

devigner

90

Tylko moje rozwiązanie z rozwijanym obrazem (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;
}

Używam bootstrap, dlatego użyłem select.form-control
You can use select{or select.your-custom-class{zamiast.

Afzal Hossain
źródło

4

To jedyna odpowiedź, która rozwiązała mój problem, chociaż pamiętaj o używaniu tła zamiast obrazu tła, ponieważ kolor wypełnienia svg zastąpi dowolny kolor tła, który ustawiłeś dla danych wejściowych.

Lucas M

Zgoda, zagłosuj na tę odpowiedź! Nie rozumiem pozostałych głosów dotyczących niepełnej odpowiedzi. Masz jakąś radę dotyczącą używania fontawesome icon zamiast inline svg?

Nicolas Thery

FontAwesome to zbiór ikon, ale potrzebujesz tylko jednej ikony. Musisz więc wyodrębnić jedną z ikon FA za pomocą jakiegoś narzędzia, takiego jak icomoon.io. Następnie wyeksportuj tę ikonę jako plik svg lub png i połącz ją ze swoim css

Afzal Hossain

Niezłe rozwiązanie, ale w mojej sytuacji dodałem kolor tła: biały;

Viktor Bogutskii

Należy jednak pamiętać, że po ustawieniu width: auto;dodana strzałka svg nakłada się na zawartość zaznaczenia. Wymaga to dodatkowego wypełnienia po prawej stronie 16 pikseli. To wypełnienie jest jednak widoczne we wszystkich przeglądarkach, przełamując projekt w innych przeglądarkach. Nie mam jeszcze na to rozwiązania ...

Klaas van der Weij

31

Jeśli chcesz kwadratowe obramowania i nadal chcesz mieć małą strzałkę ekspandera, polecam:

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

jordan314
źródło

2

Problemem jest to, że można zastąpić domyślny outlinetemat :focus. Jeśli zamierzasz użyć tej odpowiedzi, powinieneś zmienić swój select:focusstyl, aby wizualnie pokazać, że selectelement staje się aktywny lub zmieniony :focuspo kliknięciu.

Devin McInnis

@ jordan314 Sprawdź zaokrąglone rogi na tym zdjęciu . Border-radius: 0; nie ma wpływu na zaznaczenie znacznika. Przynajmniej na Chrome OSX.

Jammer

1

@ 7immy to dziwne, jestem też na Chrome OS X i oto zrzut ekranu z powyższego fiddle imgur.com/r6ce6Yv

jordan314

1

@ jordan314 A co powiesz na to? jsfiddle.net/78xa6qud/2 . Myślę, że ujdzie nam to na sucho, jeśli tło zaznaczenia i tło za nim mają ten sam kolor.

Jammer

@ 7immy ah tak, myślę, że to zastrzeżenie.

jordan314

7

Kilka dobrych rozwiązań tutaj, ale ten nie potrzebuje SVG, zachowuje obramowanie przez outlinei ustawia go w jednej linii na przycisku.

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>

Rozwiń fragment

aleemb
źródło

6

Podczas gdy górna odpowiedź usuwa obramowanie, usuwa również strzałkę, co bardzo utrudnia, jeśli nie uniemożliwia użytkownikowi zidentyfikowanie elementu jako zaznaczonego.

Moim rozwiązaniem było po prostu umieszczenie białego div (z border-radius: 0px) za zaznaczeniem. Ustaw jego pozycję na wartość bezwzględną, jej wysokość na wysokość zaznaczenia i powinieneś być gotowy!

Reed Martin
źródło

4

Rozwiązanie z niestandardową strzałką rozwijaną w prawo, używa tylko CSS (bez obrazów)

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>

Rozwiń fragment

Mihai Crăiță
źródło

Pozycjonowanie w tle, które działało lepiej dla moich potrzeb, to: background-position: calc(100% - 4px) center, 100% center;Przenosi strzałkę na środek zaznaczenia i do końca w prawo. Wielkie dzięki za wspaniały początek!

Brandon

3

Jednym ze sposobów, aby zachować prostotę i uniknąć mieszania się ze strzałkami i innymi tego typu funkcjami, jest umieszczenie go w elemencie div z tym samym kolorem tła co znacznik wyboru.

Danny Santos
źródło

1

Zgadzam się, jest to zdecydowanie najprostsze, najbardziej niezawodne i przenośne rozwiązanie.

John Henckel,

1

Należy unikać eliminowania strzał. Rozwiązaniem, które zachowuje strzałki rozwijane, jest najpierw usunięcie stylów z listy rozwijanej:

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

Następnie utwórz div bezpośrednio przed listą rozwijaną w kodzie HTML:

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

I stylizuj element div w ten sposób:

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

Display inline zapobiegnie przechodzeniu elementu div do nowego wiersza, pozycja bezwzględna usunie go z przepływu strony. Efektem końcowym jest ładne, wyraźne podkreślenie, które możesz stylizować, jak chcesz, a lista rozwijana nadal zachowuje się tak, jak oczekiwałby użytkownik.

Devigner
źródło

1

Wstawiony box-shadow załatwia sprawę.

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

Próbny

Marco Allori
źródło

0

Z jakiegoś powodu wpływa na to kolor obramowania ??? Kiedy używasz standardowego koloru, rogi pozostają zaokrąglone, ale jeśli zmienisz kolor nawet nieznacznie, zaokrąglenie zniknie.

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

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

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

mcallahan
źródło

Hmm nie jestem pewien co do OSX. Po prostu spróbowałem ponownie w systemie Windows (wersja Chrome 45.0) i nadal działa.

Wydaje

Dzieje się tak, ponieważ ustawienie obramowania powoduje, że przeglądarka wyrenderuje samą kombi, zamiast korzystać z podstawowej wersji dostarczonej przez system operacyjny.

Kong

0

dobrze, mam rozwiązanie. mam nadzieję, że może ci pomóc :)

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>

Rozwiń fragment

Amit
źródło

0

Oto sposób na zrobienie tego;

Utwórz obraz tła, który wygląda jak lista rozwijana.
Wyłącz wygląd przeglądarki
Wyrównaj obraz tła na wybranym komponencie

  .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;
  }

Jerome Anthony
źródło

-1

Użyłem rozwiązania jordan314, ale potem dodałem do wyboru klasę „border-light”. Jeśli masz domyślną klasę border-light zdefiniowaną w css, możesz jej bezpośrednio użyć. Po prostu definiuje obramowanie jako białe). Zmieniłem ramkę na kwadrat / usunąłem promień i zachowałem strzałkę.

Oto co zrobiłem:

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

jeśli nie masz predefiniowanego border-light, po prostu dodaj swój css:

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

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

Sitti Munirah Abdul Razak
źródło

-8

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

david forstner
źródło

Pytanie o Chrome / Webkit.

zishe

-10

Ustaw CSS jako

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

Spróbuj, czy to działa.

AbhiRoczz ...
źródło

Usuwanie zaokrąglonych rogów z elementu <select> w Chrome / Webkit

Odpowiedzi: