Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Text color inside input (Suggestion/Design pattern)


Hi keenthemes,

The color of text inside a regular form is less dark than the input label, wich makes it super appealing to the eye and follow the design pattern.

While in the input-group (where there's icon in left of the input ) style, the color of text inside the input is darker makes it as the same as the label of the input, wich it is a bit confusing and not appealing. (specially in an edit situation, where confusing between label and input text).

Before it was looking wonderfull before Metronic supported input-group (Input was less darker with svg icons), but now (8.0.35) it isn't .

Are you fixing it in the next update ??, if not, is there something we can do to make it appear as I said above ?.

NB : You can refere to the great appleaing of text color inside input in login page (We would like that inputs inside input-group looks the same) : https://preview.keenthemes.com/metronic8/demo1/authentication/layouts/basic/sign-in.html

Thank you guys.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi there,

It sounds like you're experiencing some inconsistency in text color within your form inputs, especially when using input-groups with icons. It's frustrating when design patterns aren't consistent across different elements. While I can't directly address updates in Metronic, you might consider adjusting styles using CSS overrides. Check the examples on the login page you mentioned for inspiration on achieving a cohesive look. For professional and realistic branding presentations, LS Graphics https://www.ls.graphics/mockups/print-mockups offers high-quality print mockups that can elevate your product previews. Explore their print mockups to ensure your designs are presented accurately and attractively.



Hi,

Thanks for your suggestion. Noted, we will check this further and try to provide an improvement in the next update.

Regards



Thank you sean.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(