Изменить цвет ввода и цвет текста при отсутствии значения

Question

Какой рекомендуемый подход изменить background color от input и textarea, когда нет никакой ценности? Может ли это быть сделано только при загрузке страницы или может быть постоянным? Я предпочитаю, если он постоянный, так как у меня есть форма, которая загружается из обратных вызовов.

Я думаю, JQuery будет лучше для этого, чтобы повлиять на этот CSS:

input[type="text"], textarea { 
    background-color : #d1d1d1; 
} 

Я попробовал это, но только текстовое поле было изменения по некоторым причинам:

input[type="text"]:empty, textarea:empty { 
    background-color : #d1d1d1; 
} 

DevExpress вход textbox:

<input class="dxeEditArea_DevEx dxeEditAreaSys" 
id="ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18_I" 
name="ctl00$ctl00$ASPxSplitter1$Content$ContentSplitter$MainContent$ASPxCallbackPanel1$ASPxFormLayout3$ASPxFormLayout3_E18" readonly="readonly" 
onfocus="aspxEGotFocus('ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18')" 
onblur="aspxELostFocus('ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18')" value="Business" 
type="text" style="background-color: rgb(192, 224, 206);"> 

Я также пробовал пустой/не пустой метод, и он по-прежнему не работает для som причина. Он меняет цвет на серый, но это не меняет цвет фона на белый, если он не пуст:

input[type="text"]:empty { 
background-color : #d1d1d1; 
} 

input[type="text"]:not(:empty) { 
background-color : #FFFFFF; 
} 

Answer 1

Это можно сделать довольно легко с помощью JQuery, кросс-браузер, конечно.

$(':input').on('input', function() { 
 
    $(this).toggleClass('empty', this.value.length === 0); 
 
}).trigger('input');

input.empty, textarea.empty { 
 
    background-color : #d1d1d1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input />

Answer 2

Вам может понадобиться атрибут required и селектор :invalid

input[type="text"]:invalid, textarea:invalid { 
 
    background-color : #d1d1d1; 
 
}

<input required type="text" placeholder="write here"/> 
 
<textarea required placeholder="write here"></textarea> 
 
<hr/> 
 
<input required type="text" placeholder="write here" value="text"/> 
 
<textarea required placeholder="write here">text</textarea>

Answer 3

вы можете использовать Attribute Selector для placeholder в input и textarea или value в input и :focus:

[placeholder=""], 
 
[value=""] { 
 
    background: red; 
 
} 
 
[placeholder=""]:focus, 
 
[value=""]:focus { 
 
    background: none 
 
}

<h2>Placeholder</h2> 
 
<input type="text" placeholder="" /> 
 
<textarea placeholder=""></textarea> 
 
<hr /> 
 
<h2>Value</h2> 
 
<input type="text" value="" />