[SOLVED] TextBox different appearence

Answered Closed
0
0

Hi

I ´m creating a program for mobiles and desktop, after check the responsive  example I have noticed the textbox is only a line similar to Material design input text control, I have checked in paint method, on theme, and cant find how that control is created some body could explain me how could I create this?

 

 

  • You must to post comments
Best Answer
0
0

It’s in the Material-3 theme (https://github.com/iceteagroup/Wisej-themes).

If you open ThemeBuilder, load the Material-3 theme and click on a TextBox it will select the TextBox appearance in the appearance tree. There you will see “inherit: inputElement”. Select it (see screenshot 1) to see the styles and properties.

In the styles you can see that it has a simple border at the bottom of 1 pixel and a css style using an :after pseudo element to remove the focused thicker animated line (see screenshot 2).

Then select the “focused” state and you can see a different css style (see screenshot 2) setting the :after pseudo element to a 2px line animated to expand horizontally to implement the material animation.

HTH

  • You must to post comments
Showing 1 result