当没有值时更改输入和文本区域背景颜色

Question

当没有价值时，建议的background color更改方法是什么？这只能在页面加载时完成还是可以持久？我更喜欢它是持久的，因为我有一个从回调加载的表单。inputtextarea

我认为 JQuery 最适合影响这个 css：

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

我尝试了这个，但由于某种原因只有文本区域发生了变化：

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

DevExpress 输入文本框：

<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);">

我也尝试过空/非空方法，但由于某种原因它仍然不起作用。它将颜色更改为灰色，但如果背景不为空，则不会将背景更改为白色：

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

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

Answer 1

您可能需要属性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>