From 115866d0fdb999cfa2c62a2882e2f0da7704e428 Mon Sep 17 00:00:00 2001 From: EETagent Date: Fri, 10 Feb 2023 12:55:52 +0100 Subject: [PATCH] feat: fix telephonenumber select ui & force important --- .../src/lib/components/select/SelectField.svelte | 13 ++++++------- .../lib/components/textfield/TelephoneField.svelte | 6 +++++- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/frontend/src/lib/components/select/SelectField.svelte b/frontend/src/lib/components/select/SelectField.svelte index b231510..7fd0230 100644 --- a/frontend/src/lib/components/select/SelectField.svelte +++ b/frontend/src/lib/components/select/SelectField.svelte @@ -36,10 +36,6 @@ @apply relative flex items-center justify-center; } - select { - @apply hover:border-sspsBlue w-full rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors duration-300; - @apply min-w-40; - } option { @apply w-full; @apply text-center; @@ -51,8 +47,11 @@ @apply border-red-700; } select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + @apply hover:border-sspsBlue w-full rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors duration-300; + @apply min-w-40; + + -webkit-appearance: none !important; + -moz-appearance: none !important; + appearance: none !important; } diff --git a/frontend/src/lib/components/textfield/TelephoneField.svelte b/frontend/src/lib/components/textfield/TelephoneField.svelte index c4a9873..5f1617e 100644 --- a/frontend/src/lib/components/textfield/TelephoneField.svelte +++ b/frontend/src/lib/components/textfield/TelephoneField.svelte @@ -15,7 +15,7 @@ // You must use E164 number format. It's guarantee the parsing and storing consistency. export let value: E164Number | null; - if (value !== null && value !== "" ) { + if (value !== null && value !== '') { let number = parsePhoneNumber(value); if (number !== null && number !== undefined) { country = number.country!; @@ -92,6 +92,10 @@ select { @apply border-1 h-full w-2/5 rounded pl-3 pr-3; @apply hover:border-sspsBlue rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors duration-300; + + -webkit-appearance: none !important; + -moz-appearance: none !important; + appearance: none !important; } .inputWrapper { @apply relative w-full;