使用CSS匹配空輸入框

43

在CSS中沒有這樣做的選擇器。屬性選擇器匹配屬性值，而不是計算值。

您必須使用JavaScript。

2010-09-01 10:23:30 Quentin

+3

對於任何後來發現這樣的回答：昆汀是正確的關於計算的值，但有是：空選擇器可以在這裏使用，並有合理的支持（所有瀏覽器除了IE8和更舊版本根據：http：//www.w3schools.com/cssref/sel_empty.asp – Cohen 2012-11-28 10:57:43

+27

'：empty'選擇器僅適用於空元素，這意味着僅在具有打開和關閉標記的元素之間爲空，和單個標籤元素，它們總是被認爲是空的[例子]（http://jsfiddle.net/SE7Bq/），所以它不能用於除'textarea'之外的輸入元素。 – am05mhz 2013-04-26 04:01:40

+5

不正確。請參閱下面的lukmo的答案。結合所需的屬性和：有效或者：無效的僞選擇器實現這一點。 – voidstate 2015-04-07 11:28:55

11

input[value=""]不會

<input type="text" />

工作，但在Chrome中

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

爲我工作，但風格不會馬上改變，因爲會有人開始打字。所以你應該使用js。

來源

2010-09-01 10:30:12

+1

由於字段編輯後DOM值屬性未更改，因此不可靠。然而，如果你不關心這個問題的好方法 - 並在最新的Safari，Chrome，FF和IE中運行... – Dunc 2013-11-12 11:00:33

+7

要匹配前者，可以使用input [value =「」]，input：not（[值]）'。 – Schism 2014-07-10 19:53:41

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>

去看live on jsFiddle

或取消使用#foo-thing:invalid（信貸@SamGoody）

來源

2012-06-26 14:37:07 lukmdo

+11

..或否定使用：無效{} https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid – SamGoody 2014-01-30 08:18:34

+0

真棒，整潔的伎倆 – TecHunter 2015-10-30 16:02:49

+0

我想要同樣的東西，但我的領域不是必需的。有沒有辦法做到這一點？ – 2017-11-09 15:13:31

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'); 
    } 
});

在jQuery中使用

。我添加了一個類並使用CSS進行了樣式化。

.empty { background:none; }

來源

2014-09-22 16:30:31

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

來源

2015-04-27 09:37:25

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

來源

2015-11-30 15:24:16 Shaggy

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/

來源

2015-11-30 15:46:38 Ant

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/

來源

2016-02-24 04:48:44 Berend

+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, 「當存在時，它指定在提交表單之前必須填寫輸入字段。」

來源

2016-04-19 21:29:25 Ariella

1

這個問題可能已經問前一段時間，但最近，我降落在這個話題尋找客戶端表單驗證，併爲:placeholder-shownsupport越來越好，我認爲以下可能幫助別人。

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

這裏是ademo和解釋上CodePen： https://codepen.io/johanmouchet/pen/PKNxKQ

來源

2017-08-02 09:12:17

使用CSS匹配空輸入框

回答

相關問題