Styling first_as_label of select menu.

  • Resolved shikarishuffle

    (@shikarishuffle)


    7 years, 9 months ago

    So I’m trying to style my contact form although styling the select menu has been a bit difficult.

    I want the first option of the menu to be a washed out color instead of black so it can fit in with the rest of the placeholder text.

    I found a way to style the first option of my select menu fine (using the attached CSS), although the default styling still overrides it to black, as this is the first option and automatically selected.

    Any workaround for this or have I missed something painfully obvious?

    CSS

    .wpcf7-form select option[value=""]{
color:#058C17 !important;
}

    cf7

    <p><br />
    [text* your-name placeholder "NAME"] </p>

<p><br />
    [email* your-email placeholder "EMAIL"] </p>

<p><br />
    [text* your-phone placeholder "PHONE"] </p>

<p><br />
[select* your-subject first_as_label "SUBJECT" "GENERAL ENQUIRY" "PROPOSAL" "ENQUIRY" "OTHER"]
 </p>

<p><br />
    [textarea your-message placeholder "MESSAGE"]</p>

<div>
    <div style="float: left; width: 50%">[cf7sr-simple-recaptcha]</div>
    <div style="float: right; width: 50%"> [submit "Send"]</div>
</div>
Viewing 5 replies - 1 through 5 (of 5 total)

  • I’m struggling with the same problem. Nothing I’ve tried works either.

    Thread Starter shikarishuffle

    (@shikarishuffle)

    .wpcf7-form select
{
}

    Worked fine in the end.

    I have the same issue…
    Can you please tell us how you did?

    I tried several things:
    div.wpcf7 select[option=”Your Country*”]{ /* doesn’t work */ }
    div.wpcf7 select[selected=”Your Country*”]{ /* doesn’t work */ }
    div.wpcf7 select option[selected=”Your Country*”]{ /* doesn’t work */ }
    div.wpcf7 select option[value=””]{ /* doesn’t work */ }

    Thread Starter shikarishuffle

    (@shikarishuffle)

    I’m pretty sure I ended up doing this:

    .wpcf7-form select
{
    color: #7F7F7F;
}
    Thread Starter shikarishuffle

    (@shikarishuffle)

    Let me know if that works for you @thomross. Otherwise I’ll go back and check what I did exactly.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling first_as_label of select menu.’ is closed to new replies.