Skip to main content
Solved

CSS question

Alex Kerschkamp
Captain
Forum|alt.badge.img+3

Hi Everyone,

We’re having a CSS question. I once saw a topic specifically for such questions, but I can't seem to locate it anymore.
We're successful in changing the appearance of the Universal looks for a client. However, one minor detail seems difficult to style. It concerns lookup fields. Have a look at the screenshots below.
 


The yellow arrow points to a lookup. This input looks alright. Until it gets focus. See below.
 

 

The placeholder text gets transformed and colored. It being colored is the issue here. We want it to remain legible, and colored the same way as our tab texts; black. How do we make it so?

Best regards,
- Alex.

Best answer by Tim de Lang

Hi Alex,

Yeah no problem, we can just get rid of the lookup bit and make sure we override all other styles:

.form-field label {
    color: black !important;
}

This should work for all labels in the form. Even if they have conditional layout for example. Be mindful that a form field can look different depending on many things (e.g. dark/light mode, background/no background, conditional layout), and that can affect the readability of the text.

Kind regards,

Tim de Lang

View original
Did this topic help you find an answer to your question?
This topic has been closed for replies.

4 replies

Tim de Lang
Moderator
Forum|alt.badge.img+4
  • Tim de Lang
  • Moderator
  • 91 replies
  • October 31, 2022

Hi Alex,

something like this should do the trick

.form-field .has-lookup label {
    color: black;
}

please note that you have .dark and .light classes on your html element. These should help you descern whether the color should be dark or light.

Kind regards,

Tim de Lang

Alex Kerschkamp
1 person likes this
  • Alex Kerschkamp
    Alex Kerschkamp
Alex Kerschkamp
Captain
Forum|alt.badge.img+3

Thanks Tim! That works! 🙂 It doesn't work on date and time inputs though, and combo boxes stay behind as well. I can't grab these as .form-field .time-input label, and input .time-input label  doesn't seem to work either. Do you happen to know the trick to grab these as well?

Tim de Lang
Moderator
Forum|alt.badge.img+4
  • Tim de Lang
  • Moderator
  • 91 replies
  • Answer
  • November 1, 2022

Hi Alex,

Yeah no problem, we can just get rid of the lookup bit and make sure we override all other styles:

.form-field label {
    color: black !important;
}

This should work for all labels in the form. Even if they have conditional layout for example. Be mindful that a form field can look different depending on many things (e.g. dark/light mode, background/no background, conditional layout), and that can affect the readability of the text.

Kind regards,

Tim de Lang

Alex Kerschkamp
1 person likes this
  • Alex Kerschkamp
    Alex Kerschkamp
Alex Kerschkamp
Captain
Forum|alt.badge.img+3

Ah, yes! Brilliant! Thanks Tim, this works wonders!

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings