From ed141338fb804ffc1ba284a75065b6a73023e03b Mon Sep 17 00:00:00 2001
From: Xeltica <7106976+Xeltica@users.noreply.github.com>
Date: Sun, 23 Aug 2020 11:05:04 +0900
Subject: [PATCH] =?UTF-8?q?Safari=20=E3=81=A7=20mk-select=20=E3=81=AB?=
 =?UTF-8?q?=E5=85=89=E6=B2=A2=E3=81=8C=E3=81=8B=E3=81=8B=E3=82=8B=E3=81=AE?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=20(#6668)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/ui/select.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index d42560e13a..cb737df6ed 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -13,7 +13,11 @@
 		>
 			<slot></slot>
 		</select>
-		<div class="suffix"><slot name="suffix"></slot></div>
+		<div class="suffix">
+			<slot name="suffix">
+				<fa :icon="faChevronDown"/>
+			</slot>
+		</div>
 	</div>
 	<div class="text"><slot name="text"></slot></div>
 </div>
@@ -21,6 +25,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	props: {
@@ -43,7 +48,8 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			focused: false
+			focused: false,
+			faChevronDown,
 		};
 	},
 	computed: {
@@ -157,6 +163,8 @@ export default Vue.extend({
 			border-radius: 0;
 			outline: none;
 			box-shadow: none;
+			appearance: none;
+			-webkit-appearance: none;
 			color: var(--fg);
 
 			option,
@@ -172,7 +180,7 @@ export default Vue.extend({
 			justify-self: center;
 			font-size: 1em;
 			line-height: 32px;
-			color: rgba(#000, 0.54);
+			color: var(--inputLabel);
 			pointer-events: none;
 
 			&:empty {