Css in Page

Ionic Framework
1

I’m having problems with the migration of styles from Ionic 3 to Ionic 4, in one of my views I have the background configured in one color, and in a form I have 3 ion-items, the first problem I have is that I modify the item- inner to have no borders and does not work and the second is the ion-toggle takes the background color of my view by default and if I change it, it takes the value as correct checked


    .toolbar-background {
        border: none !important;
    }

    .logo {

        .img {
            display: block;
            max-width: 500px;
            max-height: 98px;
            width: auto;
            height: auto;
            width: 100%;
            padding: 0px var(--padding);

            img {
                margin-top: 50px;
                display: block;
                max-width: 100%;
                height: auto;
            }
        }

        .click {
            display: inline-block;
            font-family: 'Custom';
            color: white;
            font-size: 2.5rem;
            width: 100%;
            text-align: right;
            padding: 0px var(--padding);
            line-height: 4rem;
        }
    }

    form {
        .password-eye {
            position: relative;
            cursor: pointer;
        }

        #remember {
            background-color: transparent;
            color: white;
            margin-top: 8px;
            margin-bottom: 8px;

            .item-inner {
                border: none !important;
            }
        }

        ion-item {
            border: none !important;
        }

        .custom-item {
            color: white;
            border-radius: var(--border-radius);
            background-color: var(--custom-primary-contrast);
            border: none !important;

            .item-inner {
                border: none !important;
            }
        }

        .button {
            margin: 0;
        }
    }

    ion-content {
        --ion-background-color: var(--custom-primary);
    }

    .button-ingresar {
        --background: var(--custom-secondary) !important;
    }

33 38

2

There are multiples ways to turn off borders on items in Ionic 4. You can use the lines property on the <ion-list> to change the borders on all items or use it on the individual <ion-item>'s which can accept the following values: "full", "inset" or "none". Here’s a Codepen example of those: https://codepen.io/brandyscarney/pen/WLyeOG

You can also set it on the item itself like the following:

ion-item {
  --inner-border-width: 0;
}

Here is the documentation on the CSS variables available to item: https://ionicframework.com/docs/api/item#css-custom-properties

For the toggle, it will by default use the global background color - this makes it easy to change between a light or dark theme. You can override this using the toggle’s custom properties:

ion-toggle {
  --handle-background: white;
  --handle-background-checked: white;
}

Here’s a Codepen showing the last two code examples in iOS mode: https://codepen.io/brandyscarney/pen/mgPOOj?ionic:mode=ios

If you’re still seeing problems could you please provide a Codepen or the html code & a picture of what you’re trying to achieve?