• Resolved Jewel Clark

    (@madmaudlin)


    I’m testing the My Calendar plugin and trying to style the drop downs for the month and year fields and they’re apparently being dynamically created via the shadow DOM. Is there some way to affect them? I’m specifically trying to remove the border radius and change the hover effect. The only id I can find is “select-options” but again, it’s inside the #shadow-root when viewing the dev console. Any advice is most appreciated.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Joe Dolson

    (@joedolson)

    The select elements used in My Calendar are standard HTML elements; they don’t use anything unusual outside of using a custom image for the dropdown element.

    I took a look at your site, and it doesn’t seem like there’s anything unusual in the elements there; they’re pretty standard. I’m wondering if you had something installed that was doing a replacement of select elements, but it’s no longer installed?

    Thread Starter Jewel Clark

    (@madmaudlin)

    Hi Joe,

    Thank you for replying so quickly. I may not have explained myself very well and based on additional research, it may not be completely possible but I’d appreciate your thoughts if you have time. I’m trying to style the month and year drop down boxes and when I look at them in the dev tools, they show as part of the shadow DOM and render differently in different browsers. Is there any way to address that drop down styling so it could align better with the site branding? If I could get the border-radius to 0px and the select color on the months or year not to be blue, that would be all I would want to do. Thanks in advance for any additional advice.

    Plugin Author Joe Dolson

    (@joedolson)

    It is possible to custom style select elements; it’s a pretty new thing in CSS, and isn’t supported yet in many browsers (Safari, Firefox, and Safari on iOS, for example).

    But here’s some documentation about that: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select

    Thread Starter Jewel Clark

    (@madmaudlin)

    Thank you!!! Much appreciated 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Styling calendar drop downs’ is closed to new replies.