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?

— Ian Hunter
źródło

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

Długi tekst zakrywał strzałki w pozostałych rozwiązaniach
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:

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

2

Sprawdź wygląd zestawu internetowego: brak i jego pochodne. Pierwotnie opisany przez Chrisa Coyera tutaj: https://css-tricks.com/almanac/properties/a/appearance/

— Joansy
źródło

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