Jak mogę usunąć połysk wybranego elementu w Safari na Macu?

113

Na komputerach Mac i urządzeniach iOS w Safari <select>element z kolorem tła generuje połysk. Wydaje się, że nie ma to miejsca w innych systemach operacyjnych.

Na przykład mam wybrany element z następującymi właściwościami stylu:

select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 10px 0 7px;
width: 250px;
background-color: #BD2786;
color: white;
letter-spacing: -.04em;
font-weight: bold;
border: 0;
}

Mój element ma kolor tła, który chcę, ale połysk jest nadal obecny. Czy ktoś wie, jak nadać mu płaski kolor?

css macos safari drop-down-menu background-color Ian Hunter
źródło

Odpowiedzi:

196

@beanland; Musisz pisać

-webkit-appearance:none;

w twoim css.

przeczytaj to http://trentwalton.com/2010/07/14/css-webkit-appearance/

Sandeep
źródło
4
nie ma potrzeby dziękować, ponieważ jest wiele rzeczy, o których nie wiedziałem :)
sandeep
123
Czy jest sposób, aby utrzymać strzałkę po prawej stronie? Chcę zastąpić tylko kolor. Dziękuję
Marc
19
@sandeep: I żeby to było między przeglądarkami:-moz-appearance: none; -webkit-appearance: none; appearance: none;
Dorian
6
@Marc Jeśli po 3 latach nadal jesteś zainteresowany… Dodałem rozwiązanie, które znalazłem, aby pokazać strzałki.
alicjasalamon
2
Rozwiązaniem dla IE jest użycie select :: - ms-expand {display: none; }, aby ukryć natywną ikonę rozwijanego pola wyboru w przeglądarce IE, a następnie użyj rzeczywistego obrazu png jako tła dla nowej ikony. Problem występuje, ponieważ obrazy SVG nie zawsze są prawidłowo pozycjonowane za pomocą CSS w IE.
Phyllis Sutherland
107

Użycie -webkit-appearance:none;usunie również strzałki wskazujące, że jest to lista rozwijana.

Zobacz ten fragment, dzięki któremu działa w różnych przeglądarkach i dodaje niestandardowe strzałki bez dołączania plików graficznych:

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
Rozwiń fragment

alicjasalamon
źródło
16
słodko, doceń poprawianie strzał! oto wersja z przezroczystym tłem: wybierz {background: url (data: image / svg + xml; base64, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) no-repeat 95% 50%; }
Ingo Renner,
1
zrobiłem przezroczystą strzałkę (nie można tu wkleić ze względu na długość): pastebin.com/HQ0x4Rka
mga
5
Jeśli masz szerokie wybrane elementy, będzie to wyglądać nieco inaczej. Aby to naprawić, możesz użyć przesunięć krawędzi pozycji tła w CSS3, aby lepiej wyrównać tło. Więc zastąpić no-repeat 95% 50%zno-repeat right 2px center
iSWORD
3
Te same strzały, ale w kolorze białym i przezroczystym pastebin.com/07iS41b5
Andreas Gassmann
2
Zauważyłem, że dodane strzałki zawierają zarówno strzałkę w górę, jak i w dół - jakaś szybka poprawka, aby pokazać zwykłą strzałkę w dół?
Brett,
14

Wersja 2019

Krótszy URL obrazu w tekście, pokazuje tylko strzałkę w dół, dostosowywalny kolor strzałki ...

Z https://codepen.io/jonmircha/pen/PEvqPa

Autorem jest prawdopodobnie Jonathan MirCha

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}
Noel Abrahams
źródło
1
background-colorWłaściwość ma zastosowanie do tła elementu select. Aby zmienić kolor strzałki w dół, musisz zmienić właściwość wypełnienia SVG w adresie URL, np.fill='%23fc0000'
Noel Abrahams
Lepiej używać pozycji tła bez kalkulatora: pozycja tła: po prawej .8em na górze 60%; i jakiś kursor: jest potrzebny
Iggy
Czy istnieje wersja z podwójną strzałką tego, którą ktoś może pokazać?
evolross
3

Przepraszam, że nakładam na stary przedmiot. Znalazłem tutaj częściowe odpowiedzi na moje pytania, ale musiałem trochę popracować, więc chciałem podzielić się wynikami z następną osobą.

Skończyło się na tym, że zastosowałem to samo podejście, co inni współpracownicy, ale z kilkoma poprawkami, aby naprawić następujące

  1. Długi tekst zakrywał strzałki w pozostałych rozwiązaniach
  2. Użyty obraz był nieco starą i brzydką strzałką w górę / w dół.

Poniżej znajdziesz działające rozwiązanie z rozwiązanymi powyższymi problemami. Uwaga: użyłem białej strzałki w moim przypadku użycia, być może będziesz musiał zmienić kolor strzałki na twój.

oto podgląd:

wybierz białą strzałką

select{    
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%;
  padding-right:20px;
}
Justin Edwards
źródło
//, Czy mógłbyś wyjaśnić, jak i dlaczego to usuwa połysk?
Nathan Basanese
1
Rozwiązanie zasadniczo składa się z dwóch komponentów: 1. Zażądaj, aby przeglądarka nie wykonywała żadnego stylu / wyświetlania elementu. 2. Zapewnij rozsądny styl. W przeglądarkach, które nie są okropne (czytaj, nie safari), styl elementu podanego w przeglądarce jest dobry. Jednak w safari styl zapewniany przez przeglądarkę jest obrzydliwy i okropny. W związku z tym musimy nadpisać wyświetlanie zapewnione przez przeglądarkę w każdej przeglądarce. Linie kończące się wyglądem: żadna nie wykonuje części 1 od góry. Pozostałe wiersze dotyczą części 2. Czy to pomaga?
Justin Edwards
0

Jak wspomniano tutaj kilka razy

-webkit-appearance:none;

usuwa również strzały, co w większości przypadków nie jest tym, czego chcesz.

Łatwym obejściem, które znalazłem, jest po prostu użycie select2 zamiast select. Możesz również zmienić styl elementu select2, a co najważniejsze, select2 wygląda tak samo na Windows, Android, iOS i Mac.

Charles T.
źródło
-8

Jeśli przejrzysz arkusz stylów agenta użytkownika w Chome, znajdziesz to

outline: -webkit-focus-ring-color auto 5px;

w skrócie jego własność zarys - ustaw jako Brak

to powinno usunąć blask

Surajnaikin
źródło
8
Nie pyta o kontur, ale o błyszczące tło.
Apollo