How to change active text box border colors

  • Resolved DebT

    (@debbiet)


    5 years, 8 months ago

    When the form boxes are clicked to fill them in, their border turns bright blue and I would like to change that color.

    Also if auto-fill is used, the box turns pale blue. I’d like to change that color too.

    Can you please tell me the correct selectors (if that’s right word) to change the colors?

    They are also slightly different depending on the browser.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    See Styling Contact Form

    Thread Starter DebT

    (@debbiet)

    I’d been through that page as well as the link to Buzztone and couldn’t find an answer. Finally figured it out myself:

    .wpcf7-form input:focus, textarea:focus, select:focus {
    border-color: #f9f6a2;
    box-shadow: 0 0 1px #f9f6a2 inset;
    }

    I also added autofill:off to the fields in my form and it seems to be working, even in Chrome.

    Following code is a bit risky:

    .wpcf7-form input:focus, textarea:focus, select:focus {
border-color: #f9f6a2;
box-shadow: 0 0 1px #f9f6a2 inset;
}

    It changes focus styling on all textarea & select on your site.

    Better:

    .wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus {
border-color: #f9f6a2;
box-shadow: 0 0 1px #f9f6a2 inset;
}

    Restricts changes to CF7 forms only.

    Thread Starter DebT

    (@debbiet)

    Thank you so much, that works great!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to change active text box border colors’ is closed to new replies.