2018-12-30 · With having only CSS in mind for such an effect, you can imagine an input box coupled with a label element. This label can act as a fancy placeholder for our input box and moves above the input field on focus. With an input box followed by a label, we can style things up easily with the adjacent element selector in CSS (+).
The label is the parent of the input, not it's sibling. CSS has no way to select an element based on it's descendents (nor anything that follows it). You'll need to look to JavaScript to solve this. Alternatively, rearrange your markup:
Like the checkboxes/radio buttons, we have a .control-group to wrap our elements in. We also have an element called .select wrapping our standard select field, as well as a custom .select__arrow. Alternatively, depending on the browser support needed, CSS shadow parts can be used to style the select: /* Set the width to the full container and center the content */ ion-select {width: 100%; justify-content: center;} /* Set the flex in order to size the text width to its content */ ion-select::part(placeholder), ion-select::part(text) {flex: 0 0 auto;} /* Set the placeholder color and Labels. You can, and should, use a