Question

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

我认为JQuery最能影响这个css：

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

我尝试了这个，但只有textarea因某些原因有了改变：

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

当然可以使用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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您可以placeholder input和textarea使用Attribute Selector，value和input使用:focus：< / p>

＆＃13;

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

＆＃13;

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

＆＃13;

如果没有值

3 个答案: