CODEWITHSUNDEEP
cssangularionic-frameworksassionic4
Jayprakash Singh
Jayprakash Singh

Reputation: 1373

ionic 4 how to change :shadow dom in css?

css problem with ion-select that has a button inside a shadow root. I need the default value --padding-top:10px,--padding-end:8px,--padding-bottom:10px,--padding-start:16px for this, but it is a first element and assumes the value applied as shown below.

enter image description here

below image contains color box which is ion-select and unable to control size of this box.code for ion-select is below. Can someone help me?

<ion-col size="2" style="padding:0">
            <div class="colorselect color_{{color.slice(1,7)}}">

                <ion-select >
                  <ion-select-option (ionSelect)="selectColor(optioncolor)" *ngFor="let optioncolor of colors" [value]="optioncolor" >{{optioncolor}}
                  </ion-select-option>
                </ion-select>
            </div>
          </ion-col>

enter image description here

Upvotes: 5

Views: 8659

Answers (2)

Harshit Rastogi
Harshit Rastogi

Reputation: 2112

Try this package for shadow-dom elements. Works perfectly fine. Search for Shadow-DOM-inject-styles on NPM. It let's you style shadow elements

Upvotes: -1

siva kumar
siva kumar

Reputation: 579

Try this one.Its works for me

ion-select{
    --padding-top:12px !important;
    --padding-end:12px !important;
    --padding-bottom:12px !important;
    --padding-start:20px !important;
}

Upvotes: 6

Related Questions