Remove border on active title

  • Resolved mazzop

    (@mazzop)


    6 years, 11 months ago

    Hi Phil

    Awesome plugin, thx!

    I have a simple CSS question:
    – how do I remove the border that appears when a title is activated (whether opened or closed). I can’t seem to get anywhere just with the classes I’ve been trying to style.

    It’s similar to what happens on your plugin’s faq section (even if that is not through your plugin) and while it looks fine there, for my specific need I’d like to lose it.

    Thanks for any help,
    Mads

    • This topic was modified 6 years, 11 months ago by mazzop.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author philbuchanan

    (@philbuchanan)

    Hi Mads,

    The outline is an accessibility feature for people who navigate sites with a keyboard. It lets them know that the accordion item currently has focus and can be interacted with.

    That said, you can remove it with this CSS:

    .accordion-title:focus {
    outline: none;
}
    • This reply was modified 6 years, 11 months ago by philbuchanan.
    Thread Starter mazzop

    (@mazzop)

    Thank you so very much, Phil. You’re a nice man.

    For future reference, is there a list of css targets (for want of a better word) listed somewhere? I would have never guessed the :focus bit – granted my CSS journey is just starting.

    How does one send you a donation?

    Plugin Author philbuchanan

    (@philbuchanan)

    Thank you. No donation necessary. Just glad to hear it is working well for you.

    There isn’t an exhaustive list of CSS selectors for the plugin, but there is some sample CSS a little ways down on the home page.

    Here is the list with descriptions:

    .accordion {}                   /* The main accordion container */
.accordion-title {}             /* All accordion titles */
.accordion-title:hover {}       /* Mouse over the accordion title */
.accordion-title:focus {}       /* When the title has focus */
.accordion-title:first-child {} /* The first accordion item title */
.accordion-title.open {}        /* The title of an accordion item that is open */
.accordion-content {}           /* The accordion content itself */
    • This reply was modified 6 years, 11 months ago by philbuchanan.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Remove border on active title’ is closed to new replies.

Tags