CODEWITHSUNDEEP
jqueryhtmlcss
Vicki
Vicki

Reputation: 1446

Textarea readonly but change background color back to white

I am trying to make a textarea readonly but do not like the gray background and want to make it white again... Is this possible because everything I am trying fails and it stays gray.

http://jsfiddle.net/ma42koz3/

HTML

<div class="col-xs-6">
                <div class="row">
                  <div id="DToday" class="col-xs-12">
                      <label class="centered" for="DueToday">DUE TODAY @ 5:00</label>
                      <textarea type="text" name="DueToday" id="DueToday" class="form-control" rows="7"></textarea>
                  </div>
                  <div id="DTmrw" class="col-xs-12">
                      <label class="centered" for="DueTmrw">DUE <span id="delivery-date"></span> @ 5:00</label>
                      <textarea type="text" name="DueTmrw" id="DueTmrw" class="form-control" rows="7"></textarea>
                  </div>
                </div>
            </div>

JS

$(document).ready(function() {

    $('#DueToday').attr('readonly', true);
    $('#DueToday').addClass('input-disabled');
    $('#DueTmrw').attr('readonly', true);
    $('#DueTmrw').addClass('input-disabled');

});

CSS

.input-disabled{
    background-color:#FFF;
}

Upvotes: 6

Views: 18185

Answers (4)

angel9215
angel9215

Reputation: 163

You could use jQuery's .css function instead of a class:

$('#DueToday').css("background-color", "#ff00ff");

Modified JsFiddle (Original by taxicala)

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

Try this http://jsfiddle.net/ma42koz3/2/

CSS

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
   background-color: white;
}

EDIT:

You can add class for example no-grayon textarea you don't want to be gray http://jsfiddle.net/ma42koz3/4/ and use this

CSS

.form-control[readonly].no-gray {
  background-color:white;
}

HTML

<textarea type="text" name="DueToday" id="DueToday" class="form-control no-gray" rows="7"></textarea>

Upvotes: 7

user5125729
user5125729

Reputation:

This will work

<textarea style= "background-color: white" type="text" name="DueToday" id="DueToday" class="form-control" rows="7">
</textarea>

Upvotes: 1

taxicala
taxicala

Reputation: 21759

Use !important in your rule in order to override the browsers default value:

.input-disabled{
    background-color:#FFF !important;
}

FIDDLE

Upvotes: 7

Related Questions