Changing CSS of text widget

I am unable to change the format of a text widget

the below style statement has no effect

.dt_style .webix_control.webix_el_text {background:black;color:orange;font-weight:bold}


  • edited September 2019

    Hey @sri, I wasn't completely sure on the end result you wanted to get out of the provided code, so I've included a few possible outcomes, please take a look:

    1. The first case is covering the styling of the component itself, without touching the inner input.

    2. This one is covering the option of styling just the input, without touching the outer background.

    3. Lastly, this example is showing you how to change the background of the whole control including the input itself.

    In short, if you want to style the component itself, use the name of the specified CSS class from the css property, if you want to style in the text input, access the input element inside of the text component, and if you want to style the labels, use a webix_inp_label class.

    Overall, I'm not really sure what the .dt_style class is referring to in your case, is that the CSS class specified in the css property of the text component? If so, then the provided selector is wrong, as the newly assigned CSS class will be on the same level as the .webix_control.webix_el_text class, which means that you can use your specific CSS class instead of using the .webix_control.webix_el_text component class.

  • Perfect!!! Your response covers all my cases. Much appreciate the prompt response.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!