julian.kimmig

Forum Replies Created

Viewing 1 replies (of 1 total)

  • 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;
  }
}
Viewing 1 replies (of 1 total)