# Change style of ionic v4 components

**URL:** <https://forum.ionicframework.com/t/change-style-of-ionic-v4-components/137440>\
**Category:** Ionic Framework\
**Created:** [August 5, 2018, 7:08pm UTC](https://forum.ionicframework.com/t/change-style-of-ionic-v4-components/137440 "2018-08-05T19:08:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![joseadrian](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joseadrian/32/71106_2.png) [@joseadrian](https://forum.ionicframework.com/u/joseadrian)\
**Post date:** [August 5, 2018, 7:08pm UTC](https://forum.ionicframework.com/t/change-style-of-ionic-v4-components/137440/1 "2018-08-05T19:08:28Z")

</div>

I would like to change the little down arrow of the select component but according to [this article](https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/) it can’t be done because it’s inside the Shadow DOM.

Also, there is one issue I will like to fix by modifying the styles. When the “no-padding” is applied to the “ion-select” element, the arrow is cut in half.

Are there any workarounds?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [August 5, 2018, 7:13pm UTC](https://forum.ionicframework.com/t/change-style-of-ionic-v4-components/137440/2 "2018-08-05T19:13:59Z")

</div>

Probably not what you want to hear because you want to solve your issue right now, but opening an issue and submitting a PR with a new CSS4 variables which allows you to achieve your goal (= which allow you to style the nested dom element) is maybe the way…

---

<div class="post-metadata">

**Author:** ![joseadrian](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joseadrian/32/71106_2.png) [@joseadrian](https://forum.ionicframework.com/u/joseadrian)\
**Post date:** [August 5, 2018, 7:56pm UTC](https://forum.ionicframework.com/t/change-style-of-ionic-v4-components/137440/3 "2018-08-05T19:56:51Z")

</div>

I think what I wrote seems like a demand? I know I could send a request but I have seen some similar requests. For example, to add a variable to control the opacity of the backdrop of the popmodal (since 2016). Adding a variable for the backdrop opacity seems a more reasonable change than adding a variable for a specific element of one component that maybe nobody care (except the designer I work with).

I might need to create my own component to achieve what I want. I haven’t used ionic since v1 and still learning about the changes.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [August 5, 2018, 8:11pm UTC](https://forum.ionicframework.com/t/change-style-of-ionic-v4-components/137440/4 "2018-08-05T20:11:12Z")

</div>

If you know then…or a workaround like this maybe [[ionic-v4] shadow-dom](https://forum.ionicframework.com/t/ionic-v4-shadow-dom/137350/3?u=reedrichards)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:26pm UTC](https://forum.ionicframework.com/t/change-style-of-ionic-v4-components/137440/5 "2021-07-19T21:26:08Z")

</div>

Closed on July 19, 2021, 9:26pm UTC