How to use CSS on Ionic 4


That could sound weird, but I’m really new on ionic and I’m having problems figuring out how to use it.

How can I overwrite the global scss using the pages’ css?

I’d like to have a sample…

this is how I was doing on ionic 3:

page-list-master {

    ion-slides {
        height: 50%;
        background-color: #090F11;
        background-size: 100% auto; 
        background-repeat: no-repeat;
        padding-top: 16px;
        padding-bottom: 16px;
        -moz-box-shadow:    inset 0 0 4px #000000;
        -webkit-box-shadow: inset 0 0 4px #000000;
        box-shadow:         inset 0 0 4px #000000;

How can I do the same thing on ionic 4?

1 Like

You are not alone, @joshmorony wrote some introduction on that subject, I recommend going thru these tutorials even if I hope that he will write some more deeper tutorials soon about it :wink:

introduction to css4 variables:

migration guide:

shadow dom and styling:

1 Like

@joshmorony tutorial for its not so helpful.

I am trying to hide currently selected value for <ion-select> that i can see its under shadow-root(open) <div role="textbox" aria-multiline="false" class="select-text">Female</div> after trying all the solutions that has been mention on internet nothing happen.

If somebody help me how i can apply css to

class=“select-text” in ionic 4 will be really helpfull for me.


thanks in advance


work with classes !!!


can you please give example? @eraldguri

<div class="example">
<ion-item></ion-item>(or something else:button etc)

in CSS:
.example {


But if we already have an element called “app-home” - why add a class to it just to style it ?
vs simply app-home { background-color: dark } ?