We use this CSS to style disabled inputs.

.form-control[data-input][disabled], .form-control[data-textarea][disabled] { 

   border-radius: var(--border-radius-s);   

 border: 1.5px solid var(--color-neutral-2);   

 background: var(--color-neutral-2);    

color: var(--color-neutral-7);

}

If you're not familiar with CSS in OutSystems, you can follow this course.

https://learn.outsystems.com/training/journeys/css-590 

Hi Chin,

You can use the following CSS in your stylesheet:

/********** This CSS for disabled input and text areas ********/

.form-control[data-input]:disabled,

.form-control[data-textarea]:disabled {

  color: black;

}

/********** This CSS for all form controls (inputs, textareas, etc.) ********/ 

.form-control {      
      color : black !important;
}


You can choose any of the above options depending on your specific requirement. The first one targets only disabled fields with specific attributes, while the second one applies to all form controls. 

in the philosophy of "Teach him how to fish" : finding out yourself is not difficult, you just need to know where to look :

• Open your screen in Chrome
• Open Chrome dev tools : rightclick anywhere and choose inspect
• Rightclick on the element involved and choose inspect
• This will bring you to roughly the right place in the element tree
• You still have to make sure there that you are on the exact right element
• That will require some searching in the rules to find which element has the color rule

• in this case, it is not the span but the input inside of the span

• In the styles tab, you can filter on for example 'color'

• the rule that is not strike-through is the one currently determining the color of your element

• You can copy the selector it is part of

• In your Theme or Module CSS, use a selector with at least the same or preferably a higher specificity, so easiest is just use the exact same selector

All the above is enough to find what selector you would have to use in your CSS, but if you are up to it, here's a little extra treat. 

When in doubt, you don't have to go back to Service Studio, edit CSS, publish and refresh the screen to find out if you have choosen the right selector, you can edit right there in the styles tab to test it. You can add the intended CSS as part of an extra temporary inspector stylesheet.  

Bear in mind this is not exactly the same as adding the CSS somewhere in your project, because in your OutSystems application, there is an order of stylesheet loading you have to know about.  But for overruling OutSystems UI selectors, doing it in your module or theme will be fine.

• add a new rule and copy paste the selector you think of using

• Now, add your styling you think of using
• You can immediately see the effect in the application  
• but the strike-through on the styles tab is not refreshed !

• I don't like that, so just to be sure, In the element tree, i first click on some other element and then back on the element I'm trying to style, to make the Styles tab refresh it's strikethroughs

• Yes ! there it is, the original rule from OutSystems UI is now strikethrough, and the rule we added is active, nice.

Dorine