79
A
回答
43
在CSS中沒有這樣做的選擇器。屬性選擇器匹配屬性值，而不是計算值。
您必須使用JavaScript。
11
input[value=""]不會
<input type="text" />
工作，但在Chrome中
<input type="text" value="" />
爲我工作，但風格不會馬上改變，因爲會有人開始打字。所以你應該使用js。
122
如果只有場是required你可以用input: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>或取消使用#foo-thing:invalid（信貸@SamGoody）
3
$('input#edit-keys-1').blur(function(){
tmpval = $(this).val();
if(tmpval == '') {
$(this).addClass('empty');
$(this).removeClass('not-empty');
} else {
$(this).addClass('not-empty');
$(this).removeClass('empty');
}
});
。我添加了一個類並使用CSS進行了樣式化。
.empty { background:none; }
0
我的答案，想知道我們有明確的屬性得到空的輸入框，看看這個代碼
/*empty input*/
input:empty{
border-color: red;
}
/*input with value*/
input:not(:empty){
border-color: black;
}
UPDATE
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;
}
}
+7
'：空'只適用於沒有孩子的元素。輸入根本不能有子節點，因此輸入將總是帶有紅色邊框。另請參閱[此評論]（http://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css#comment23212939_3617050） – Zhegan 2015-04-27 14:58:55
+0
@Zhegan檢查我的更新答案， – 2015-04-28 11:14:46
+2
@NasserHadjloo你這個測試？更改'值'不會更改子節點的數量。 – jcuenod 2015-07-22 20:13:39
12
更新字段值不會更新其在DOM中的值屬性，這就是爲什麼您的選擇器總是匹配字段，即使它不是實際爲空。
而是使用invalid pseudo-class達到你想要什麼，就像這樣：
input:required {
border: 1px solid green;
}
input:required:invalid {
border: 1px solid red;
}<input required type="text" value="">
<input required type="text" value="Value">
8
如果支持舊的瀏覽器是不需要的，你可以使用的required，valid，並且invalid組合。
使用它的好處是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="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>僅供參考，這裏的jsfiddle：http://jsfiddle.net/0sf6m46j/
66
在現代瀏覽器中，您可以使用:placeholder-shown瞄準空輸入（不要與::placeholder混淆）。
input:placeholder-shown {
border: 1px solid red; /* Red border only if the input is empty */
}
更多信息和瀏覽器支持：https://css-tricks.com/almanac/selectors/p/placeholder-shown/
+5
在IE中不工作（直到11），但很好的答案 – Amanpreet 2016-11-05 03:23:10
+1
這太棒了！非常有幫助:) – unbreak 2016-12-19 14:46:50
+2
即使沒有佔位符集，這項工作是否會繼續？ – TricksfortheWeb 2017-03-15 20:51:42
3
這爲我工作：
HTML： - 所需屬性添加到輸入要素
<input class="my-input-element" type="text" placeholder="" required />
CSS： - 使用：無效選擇器
input.my-input-element:invalid {
}
注：不需要在輸入元件
- 值。
- 關於需求從w3Schools.com, 「當存在時，它指定在提交表單之前必須填寫輸入字段。」
1
這個問題可能已經問前一段時間，但最近，我降落在這個話題尋找客戶端表單驗證，併爲:placeholder-shownsupport越來越好，我認爲以下可能幫助別人。
使用Berend使用這個CSS4僞類的想法，我能夠創建一個表單驗證，只有在用戶完成填充後纔會觸發。
這裏是ademo和解釋上CodePen： https://codepen.io/johanmouchet/pen/PKNxKQ
相關問題
- 1. 使用jQuery框架將css類應用於在輸入框/ ul列表中的鍵入上找到的匹配
- 2. 輸入框：類型不匹配錯誤
- 3. CSS輸入框
- 4. 嘗試使用CSS將輸入框定位到輸入框
- 5. 使用CSS和HTML擴展輸入框
- 6. CSS的輸入框
- 7. 輸入邊框CSS
- 8. 輸入模式匹配java
- 9. 未輸入模板匹配
- 10. 輸入不匹配異常？
- 11. 不匹配輸入「）」在CQL
- 12. ANTLR4：不匹配的輸入
- 13. 輸入匹配異常雙
- 14. 和「不匹配輸入」
- 15. ANTLR4：不匹配的輸入
- 16. 用戶名輸入和匹配使用python-（陷入while循環）
- 17. 如何使RegEx匹配CSS非匹配的部分匹配
- 18. 從正則表達式匹配刪除空間，同時在輸入框中
- 19. 如何使密碼輸入與另一個輸入匹配
- 20. 匹配用戶輸入與tripplestore數據
- 21. 匹配的子用戶輸入
- 22. 如何精確匹配用戶輸入
- 23. 將用戶輸入與indexOf匹配
- 24. 匹配用戶輸入和字符串
- 25. CSS修改輸入框
- 26. 使用輸入框
- 27. 輸出不匹配輸入C++
- 28. 輸入和輸出數組不匹配
- 29. 如何使輸入框永不變空？
- 30. 匹配用戶輸入並通過數字計算輸入C++
對於任何後來發現這樣的回答：昆汀是正確的關於計算的值，但有是：空選擇器可以在這裏使用，並有合理的支持（所有瀏覽器除了IE8和更舊版本根據：http：//www.w3schools.com/cssref/sel_empty.asp – Cohen 2012-11-28 10:57:43
'：empty'選擇器僅適用於空元素，這意味着僅在具有打開和關閉標記的元素之間爲空，和單個標籤元素，它們總是被認爲是空的[例子]（http://jsfiddle.net/SE7Bq/），所以它不能用於除'textarea'之外的輸入元素。 – am05mhz 2013-04-26 04:01:40
不正確。請參閱下面的lukmo的答案。結合所需的屬性和：有效或者：無效的僞選擇器實現這一點。 – voidstate 2015-04-07 11:28:55