diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 785b34f659..9fcaa1d183 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -21,6 +21,8 @@ display: flex; position: relative; + align-items: center; + font-family: $font-family-base; overflow: hidden; @@ -54,6 +56,8 @@ button { .select-icon { position: relative; + + opacity: .33; } .select-text { @@ -85,7 +89,5 @@ button { color: currentColor; - opacity: .33; - pointer-events: none; } diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 36764d090c..19a4829872 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -11,6 +11,11 @@ import { SelectCompareFn } from './select-interface'; /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. + * + * @part placeholder - The text displayed in the select when there is no value. + * @part text - The displayed value of the select. + * @part icon - The select icon container. + * @part icon-inner - The select icon. */ @Component({ tag: 'ion-select', @@ -426,6 +431,8 @@ export class Select implements ComponentInterface { 'select-placeholder': addPlaceholderClass }; + const textPart = addPlaceholderClass ? 'placeholder' : 'text'; + return ( -
+
{selectText}