Hi great module, helping me out a lot with translatable placeholders! I am having a little trouble theming it the way I would like to tho, allow me to explain.

I am trying to mimic the webform required theming with your module, I would like to simply have a red asterisk beside the required fields like what webform does by default.

I see that I can customize the required indicator using the .required class, however when I change the color this way it not only changes the color of the required indicator but it also changes the color of the label and any selections that are implemented as answers for drop downs selections.

This is not a problem if the label stays hidden, as it does with most of the fields. I am however trying to use a drop down selection and the result is that the title which is the default position of the drop down has been changed to the color I indicated (in this example red) but so have all the selections. You can see the example on the attached jpg.

You can also see that the other fields didn't change color, first name, last name and message all have the required * but no color. I am not sure if this second part is a bug or my CSS is simply being overwritten somewhere. Any help would be greatly appreciated.

Thanks!
Steven

CommentFileSizeAuthor
required_color.jpg262.51 KBSamucia

Comments

Samucia’s picture

Samucia commented

After finding and reading this https://www.drupal.org/node/1566212 closed issue, I think I may have opened a duplicate issue. My apologies, I should have posted my issue as a comment to that issue. I am also not sure this is something that will be easy to do // need to be implemented as it seems I am possibly the only one that want to have it this way.

Thanks for you time,
Steven

Samucia’s picture

Samucia commented

I think the solution that I am looking for is for the required indicator to have it's own css class, so I can change the color without the color of the title/placeholder text changing.

If I was more adept I am pretty sure I could just find the part in the module that displays the result and wrap a span around it and give it a class? That sound about right? I haven't made it that far in my Drupal training yet to be able to do it in practice but I think the theory is right.

chrisfree’s picture

chrisfree commented

@samucia,

Thanks for reaching out. If I am understanding correctly, you would like to style the required indicator within the placeholder attribute differently than the rest of your placeholder value. Unfortunately, this isn't something you can pull off with CSS and basic form elements alone. We cannot add a wrapper element around the required indicator because this would introduce html into the value of an attribute, in this case the placeholder attribute. I believe this would be considered invalid HTML. I also don't know how this would affect the rest of the DOM, form validation, etc.

You could consider rolling something within your css to accomplish this. Perhaps a :psuedo element that adds the "required asterisk" to the fields in question? Here's some code that might get you started down that path:

#form-element {
  position: relative;
}

#form-element:after {
  content: '*';
  color: red;
  position: absolute;
  right: 5px;
  top: 5px;
}

Best of luck!

Samucia’s picture

Samucia commented

Thanks for getting back to me, much appreciated.

If I am understanding correctly, you would like to style the required indicator within the placeholder attribute differently than the rest of your placeholder value.

Yes I am trying to get the same behavior as the webform module, title/placeholder in one color (prefereably the same color) and * in red.

I now understand that the title and required indicator are combined in your module to make the placeholder, and that has no markup (or stripped of its markup) so another separate class cannot be added to the required indicator. That's too bad because I really just want to change the color, the placement is perfect.

I will try the css that you mention above to try and get the * in the right place, but have a feeling that I won't be able to get it in the same position easily. Not sure if I can add tool tip text via css to mimic the hover effect in webform either. I guess I will give it a try, not sure my current skill set will let me accomplish this in a reasonable time, may be a few days before my next response.

Another question about the placeholder text:
When I do use the .required class I can't seem to change the placeholder text color, the only placeholder that seems to want to change is the drop down selection. As you can see in the original attachment all the placeholders are the original color, except for the text in the drop down selection even tho the .required rule is listed in the css.

If I remove the drop down selection the placeholder text remains unchanged even tho the .required color has been changed in the css. I have even tried to use .webform-hints-field{color:red;} and again it only changed the color of the text in the drop down selection even tho some other fields have this class applied to them. Is it possible that because the original element is invisible that the css rule is not being applied to the placeholder text?

Again thanks for helping me out, much appreciated!
Steven

guschilds’s picture

guschilds commented

Hey Steven,

Yes, unfortunately HTML can't be added in the placeholder attribute in a way that would allow for the required marker to be a different color.

As far as your other questions in #4: Changing the placeholder text color with CSS is not the same as changing the color of other text. It takes special selectors to do so. From this StackOverflow thread, it looks like this should work:

::-webkit-input-placeholder { /* WebKit browsers */
    color: #909;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color: #909;
}

The select list doesn't actually use the placeholder attribute. That's why its color was changing when the others weren't.

Does that make sense?

chrisfree’s picture

chrisfree commented
Status: Active » Closed (won't fix)