Text Box Background Color - Mendix Forum

Text Box Background Color


I am trying to change the background color of a text box input field (not all text boxes in my app, only some of them).  I tried putting a custom class on the text box widget in the modeler, but that didn't do the trick.  Looking at the browser console, the text box is a Div with an Input inside of it.  The custom class applies to the Div, but not the nested input.  I have included a screen shot below:

Can someone give me a pointer or two about how to change the styling of the nested Input object?  Or some other way to change the background color and other styling of the text box?

note: Modeler version is 7.21, but this is not available in the drop down list in the forum

3 answers

Hi Mike,

You should apply the following to your custom SASS file:

.custom-class {
  input {
    background-color: red; // or the color you want ;-)

To specify only text boxes you can add the following: [type="text"] right behind input. So you will then have input[type="text"] {

Hope this helps.



in CSS you need to use superClasses then the sub class after, like : 


.yourCustomClass input{
   background: red;



Try using this SASS on a container and then wrap your input around it.

.custom-code {
    textarea.form-control {
           background-color: yellow;