Contact Form 7 – How do I change just the first_as_label font color?

  • Hi,

    I’m using the Contact Form 7 plugin and I have a dropdown menu. Is there a way to change the color of the first_as_label font color so it looks like the lighter watermark text in the other fields?

    Here’s my form:

    <p>What would you like to talk about?
    [select* project-type class: menu-project-types
    first_as_label
    “Pick a project type”
    “Art”
    “Graphic Design”
    “Animation”
    “Something else”]</p>

    I can change the color of all the text in the dropdown using the CSS class “.menu-project-types” but that doesn’t really help me. I want to change the color of “Pick a project type” only.

    I tried getting rid of the class and “first_as_label” and adding watermark ”Pick a project type” but that didn’t work either.

    Do I need to change or add something in the CSS? Or do I need to add or change something in the a plugin PHP file? Perhaps the select.php file? Maybe something to do with $first_as_label. I don’t now a lot about PHP.

    I’d appreciate some help.

    Thank you.

    Manny Jasus

    https://www.ads-software.com/plugins/contact-form-7/

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

  • Hi @mannyjasus,

    Did you find an answer? I’m wondering too if it possible to style the “first_as_label” ??

    Thanks for your help

    Thread Starter mannyjasus

    (@mannyjasus)

    Hi @pixelmort,

    No, I didn’t find an answer. I’ll definitely post back if I do, but for now I’ve moved on.

    Got a Workaround using CSS and jQuery, could be also done using plain JS but in my current Project jQuery was required.

    Note that the js action affects all of your select inputs, not just the one defined as first_as_label. In most cases this shouldn’t be a problem. The style is only appended if the value of the selected option is empty. If first_as_label is set, CF7 leaves it’s value empty. That’s what i used as indicator.

    jQuery Snippet
    + adds value of selected option as attribute on select element. 

    
$(function () {
  $('select').each(function () {
    $(this).attr('selected-option', $(this).find('option:selected').val());
  });
  $('select').on('change', function () {
    $(this).attr('selected-option', $(this).find('option:selected').val());
  });
});

    SCSS
    + styles dropdown using attribute selector
    + the second part is just as visual indicator that it works ??

    
select[selected-option=""] {
  /* styling of select item if first_as_label item is selected */
  color: #888;
}

select {
  option:first-child {
    /* styling of dropdown menu first_as_label item */
    color: #ccc;
    background-color: red;
  }
  option {
    color: yellow;
  }
}

    Hi.

    Does any body knows how to change the field text color? I want to put the text in dark gray or black but didn’t find any answer. Here is my contact page: https://damienfrancoeur.com/contact-me/

    Many thanks.
    Damien

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Contact Form 7 – How do I change just the first_as_label font color?’ is closed to new replies.