Custom Class To Change a Specific Text Box Widgets Properties

0
Hi All, I’ve read many posts on this subject...changing box size, font size etc. and I’m still struggling.  I don’t want to change all the text boxes, but only specific text boxes.  know I have to create a custom class.  I’ve got that down (tested some stuff on text labels)...putting my classes in \theme\styles\web\css\myCustomClass.css. I made a custom class .form-control {font-size: 8px;  text-align: center;  background-color: black;  color: rgb(0, 255, 0);  padding: 0px;  width: 25px;} and put “form-control” in the common class field in the editor (MX 8.14.1) for my text box.  No surprise here, my custom class overrides all form-control and all text boxes display with the new properties. QUESTION:  How do I write the class to I can target a specific text box and what do I put in the class field in the studio pro editor? I hope I can do with without using Calypso...sometimes it runs properly (recognizing my app folders) and sometimes it doesn’t (it won’t recognize my app folders).  I’ve installed VSCode as well...I’m using it to create my .css file. Thank you so much!! TEd.
asked
2 answers
0

If you want to only to use it in a specific text box you could either put that class in the properties of that textbox or put the CSS in the Style.

So either fill in the Class or put the CSS right into the Style section if you only want to change the CSS here and nowhere else.
Regards,

Ronald

 

answered
0

Make sure to use your own class name so something like .mytextbox and write the properties you need and then set this class in the Editor.

By reusing an existing class in the way described this will overwrite all objects using that class.

To allow for other then the defined properties you can extend the class, see https://css-tricks.com/the-extend-concept/ for more information.

answered