diff --git a/core/api.txt b/core/api.txt index 521d38e583..c2692cff7c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1038,6 +1038,8 @@ ion-select,css-prop,--padding-bottom ion-select,css-prop,--padding-end ion-select,css-prop,--padding-start ion-select,css-prop,--padding-top +ion-select,css-prop,--placeholder-color +ion-select,css-prop,--placeholder-opacity ion-select-option,shadow ion-select-option,prop,disabled,boolean,false,false,false diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index de29075563..947a5374aa 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -793,12 +793,14 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ------------------ | --------------------------------------------------------------------------------------------------------- | -| `--padding-bottom` | Bottom padding of the select | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select | -| `--padding-top` | Top padding of the select | +| Name | Description | +| ----------------------- | --------------------------------------------------------------------------------------------------------- | +| `--padding-bottom` | Bottom padding of the select | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select | +| `--padding-top` | Top padding of the select | +| `--placeholder-color` | Color of the select placeholder text | +| `--placeholder-opacity` | Opacity of the select placeholder text | ---------------------------------------------- diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 6b0cc94cfd..785b34f659 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -9,7 +9,13 @@ * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select * @prop --padding-bottom: Bottom padding of the select * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select + * + * @prop --placeholder-color: Color of the select placeholder text + * @prop --placeholder-opacity: Opacity of the select placeholder text */ + --placeholder-color: currentColor; + --placeholder-opacity: 0.33; + @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); display: flex; @@ -37,9 +43,9 @@ } .select-placeholder { - color: currentColor; + color: var(--placeholder-color); - opacity: .33; + opacity: var(--placeholder-opacity); } button { diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 29eb9074c9..95b88aa745 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -471,10 +471,10 @@ export class Select implements ComponentInterface { 'select-disabled': disabled, }} > -
+
{selectText}
-