CSS for Chevron in Ons-List-Item ?

dvlwjoffice

Yo guys, i just want to add css to my chevron in ons-list item.
Already tried to find the element/class/whatever that i can found when it render, but its useless.

Anyone can help ?

Thanks

Fran Diox

@dvlwjoffice Try .list-item--chevron:before

If you simply want to rotate it, keep the original translateY and only change the rotation angle. E.g. pointing down would be:

  .list-item--chevron:before {
    transform: translateY(-50%) rotate(45deg);
  }

Alternatively, you can also create modifiers to do this:

  .list-item--chevron:before {
    transition: transform .2s ease;
  }
  .list-item--down.list-item--chevron:before {
    transform: translateY(-50%) rotate(45deg);
  }

And then try this to toggle it:

<ons-list-item modifier="chevron" onclick="ons.modifier.toggle(this, 'down')">

dvlwjoffice

@Fran-Diox
erm, something fishy in my case, i tried it to change the color first like this :

.list-item--chevron:before{
    color: #000 !important;
}

But it doesn’t work.

Fran Diox

@dvlwjoffice Oh, that. If you inspect the DOM you’ll see that chevron is only a border. Therefore, border-color: #000 should be enough.

dvlwjoffice

@Fran-Diox

Well fran, its work ! ! !
thanks so much about it. Btw, beside this chevron, what DOM is only a border ? so maybe nextime i can change it and don’t panic.

Oh yeah btw sorry for OOT, was Onsen UI (not monaca) support to make a custom splashscreen? the idea is, when i open my apps, the first page it open will be this splashscreen page, i will load all my configuration here, and then after it complete it will be redirect to index.html.

misterjunio

@dvlwjoffice that’s unrelated to Onsen UI, if you are building hybrid apps you need a plugin such as this one for that.

CSS for Chevron in Ons-List-Item ? browsing