如何對空輸入框應用樣式？如果用戶在輸入字段中輸入了某些內容，那么就不應該再應用該樣式。這在CSS中可能嗎？我試過這個:

input[value=""]

在現代瀏覽器中，您可以使用:placeholder-displayed來定位空輸入(不要與::placeholder混淆)。

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

在HTML中，您必須設置占位符屬性。Chrome瀏覽器要求至少一個空格字符作為值。

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

如果只有字段是必需的，您可以輸入:valid

#foo-thing:valid + .msg { visibility: visible!important; }

<input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

輸入[值=""]，輸入:not([值])

使用:

<input type="text" />
<input type="text" value="" />

但是一旦有人開始輸入，風格就不會改變(為此你需要JS)。

更新一個字段的值并不會更新它在DOM中的value屬性，這就是為什么您的選擇器總是匹配一個字段，即使它實際上并不為空。

相反，使用無效的偽類來實現您想要的，就像這樣:

input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}

<input required type="text" value="">

<input required type="text" value="Value">

如果不需要支持遺留瀏覽器，可以使用required、valid和invalid的組合。

使用這種方法的好處是有效和無效偽元素可以很好地處理輸入字段的類型屬性。例如:

input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

<input type="email" name="email" placeholder="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

我知道這是一個很老的話題了，但是事情已經發生了一些變化，它確實幫助我找到了解決問題所需要的東西的正確組合。所以我想分享一下我所做的。

問題是，如果一個可選輸入被填充，我需要為它應用相同的css，就像我為一個已填充的必填輸入應用CSS一樣。css使用了psuedo類:valid，它在可選輸入未填充時也應用css。

這是我如何修復它；

超文本標記語言

<input type="text" required="required">
<input type="text" placeholder="">

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}

這對我很有效:

對于HTML，向input元素添加所需的屬性

<input class="my-input-element" type="text" placeholder="" required />

對于CSS，使用:invalid選擇器來定位空輸入

input.my-input-element:invalid {

}

注意事項:

關于必需來自w3Schools.com: "如果存在，它指定在提交表單之前必須填寫輸入字段." 在jQuery中。我添加了一個類，并用css進行了樣式化。

.empty { background:none; }

我在輸入中添加了一個類名，然后應用CSS規則:

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

這個問題可能很久以前就有人問過了，但是當我最近在尋找客戶端表單驗證時，隨著:placeholder-displayed支持變得越來越好，我想下面的內容可能會對其他人有所幫助。

利用Berend使用這個CSS4偽類的想法，我能夠創建一個只有在用戶完成填充后才觸發的表單驗證。

以下是CodePen上的ademo和解釋: https://codepen.io/johanmouchet/pen/PKNxKQ

如果你很高興不支持IE或pre-Chromium Edge(如果你使用它進行漸進式增強，這可能沒問題)，你可以使用:placeholder-正如Berend所說。請注意，對于Chrome和Safari，您實際上需要一個非空的占位符，盡管空格也可以。

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a >floating labels</a>.
</p>

所以我之前在玩新的:where和:is子句，并想到了這個有趣的東西，在發現這個帖子中有:invalid和:placeholder-displayed位之后，我想我可以分享這種可能性以供將來參考

:required:where( input, textarea ):where( :placeholder-shown, :invalid ) {
    border-color: var(--warning);
}

它應用了:root {-warning:orange；}顏色添加到任何必需的輸入或文本區域，這些區域要么是空的，要么是無效的。這真是性感至極

雖然目前沒有瀏覽器支持它，但有一個提議是:空白偽類。

參考:https://developer.mozilla.org/en-US/docs/Web/CSS/:blank. 請注意，這是實驗性的，目前還沒有瀏覽器支持它。

這就是你如何讓它成為可能。不要忘記設置placeholder = & quot"和所需的attr到您的輸入。你可以隨心所欲地更換道具。

body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-gp {
    margin-top: 150px;
    position: relative;
    
}
.input-gp input {
    position: relative;
    
}
.input-gp label{
    position: absolute;
    left: 5px;
    bottom: 5px;
    transition: all .4s ease;
}
.input-gp input:placeholder-shown + label{
    left: 10px;
    bottom: 5px;
}
.input-gp input:focus + label,
.input-gp input + label{
    bottom: 30px;
    left: 10px;
}

<body>
 <div class="input-gp ">
<input  type="email" name="" id="email" placeholder=" "       required>
   <label class=" position-absolute" for="email"> Email</label>
  </div>
  
 </body>

我想知道答案，我們有明確的屬性得到空的輸入框，看看這個代碼

/*empty input*/
input:empty{
    border-color: red;
}
/*input with value*/
input:not(:empty){
    border-color: black;
}

更新

input, select, textarea {
    border-color: @green;
    &:empty {
        border-color: @red;
    }
}

更多的是為了在驗證中有一個很好的外觀

input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}