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