文本区域只读但背景颜色改回白色

Question

我正在尝试将textarea设置为只读，但不喜欢灰色背景，并希望将其变回白色...是否可能？因为我尝试的所有方法都失败了，它仍然是灰色的。 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;
}

- Vicki

Answer 1

在您的规则中使用!important，以覆盖浏览器的默认值：

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

FIDDLE

- taxicala

Answer 2

请尝试这个http://jsfiddle.net/ma42koz3/2/

CSS

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

编辑：

您可以为不想要变灰的文本区域添加类，例如no-gray http://jsfiddle.net/ma42koz3/4/，并使用以下

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>

- Nenad Vracar

---

你是如何将那些你想要变灰的文本区域分开的？ - Nenad Vracar

Answer 3

这将有效。

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

- user5125729

Answer 4

你可以使用jQuery的.css函数来代替类：

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

修改后的 JsFiddle（原作者：taxicala）

- angel9215