Change the color of textbox input area background

1
Hello,   I am trying to change the color of the textbox input area background, but when i give background-color:red; it is not adding to the input area background but to the back of the textbox itself. Any idea on how to achieve this?   Thanks, Guru
asked
3 answers
2

Hi Simpy,

Inline style is not the recommended way to style an app. 

Add CSS class to the component for example “input-alert” and add the class to the theme file, and use CSS selector to target the input and style the background. 

https://docs.mendix.com/howto/front-end/atlas-ui

Cheers, 

Andries

answered
2

Hi,

In your browser, right click the element, and inspect (chrome DevTools).
The element will likely have a class, if it doesn’t, utilize css selectors to specifically target the element.

make your changes in the theme/custom/custom.css file.
ie) in this fake html, if I wanted to target input, because it has no class, i need to target it like this in my CSS.
CSS
 

div.outside  > span.spanClass > input {
 background-color: red; 
}


HTML

<div class="outside">
  <span class="spanClass">
     <input value="target me">
  </span>
</div>


Devtools is your friend! Utilize it and know it well.
You can make css/style changes to elements to test what works, and then implement those changes in your custom.css file.

answered
0

Thank you Andries and Andrew for you comments. As you suggested i was able to achieve this by adding a custom scss file and all the  stylings to it.

 

Thank you,

Guru

answered