Set background color of text box - Forms

replied on March 30, 2016

Priya,

To override the default background color we just need to provide a more specific style than the default one. Try something like this.

CSS

.cf-formwrap input.readOnlyStyle[readonly] {
  background-color: #bbb !important;
}

Javascript

$(document).ready(function () {
  
  $('.cf-formwrap input[disabled]').each(function(){changeStyle(this);}); 
  $('.cf-formwrap select[disabled]').each(function(){changeStyle(this);});
  $('.cf-formwrap textarea[disabled]').each(function(){changeStyle(this);});
  $('.cf-formwrap input[readonly]').each(function(){changeStyle(this);});
  $('.cf-formwrap select[readonly]').each(function(){changeStyle(this);});
  $('.cf-formwrap textarea[readonly]').each(function(){changeStyle(this);});

  function changeStyle(element) {
    $(element).addClass('readOnlyStyle');
  }

});

There may well be a simpler way to do it but I just went ahead and added a class to each read only element.

0 0

replied on March 30, 2016

I just realized I did the exact opposite of what you asked. Here is a much simpler version that targets the editable fields.

CSS

.cf-formwrap input:not([readonly]) {
  background-color: #bbb;
}

.cf-formwrap select:not([readonly]) {
  background-color: #bbb;
}

.cf-formwrap textarea:not([readonly]) {
  background-color: #bbb;
}

0 0

Question

Question

Set background color of text box - Forms

Replies

Sign in to reply to this post.