輸入字段爲空時有效嗎？

我一直在嘗試使用CSS僞類和僞元素，並且發現了一些我無法解決的問題。輸入字段爲空時有效嗎？

考慮下面的HTML輸入字段：

<input type="number" value="1" min="1" max="1000" step="1" pattern="\d" /><span></span>

爲了實現3種狀態：空，有效和無效的。我使用:: after僞元素（應用於與輸入相鄰的跨度）在該字段的值有效時添加複選標記，並且在該值無效時添加X.

我正在使用僞類：有效和：無效，似乎當輸入字段爲空（值=「」）其狀態也是有效的。

有問題的CSS如下：

.v3_forms input[value=""] + span::after { 
    content: ""; 
} 
.v3_forms input:valid + span::after { 
    content: "\2713"; 
    color: limegreen; 
} 
.v3_forms input:invalid + span::after { 
    content: "X"; 
    color: #ce0000; 
}

爲了什麼，我能告訴，在瀏覽器中清除值之後，第二CSS規則優先，即使特異性相同。
我在這裏測試了選擇器：specificity calculator並且似乎屬性和僞類具有相同的權重。

來源

2015-07-11 jnkrois

我相信如果您不想使用空值，必須使用'required'屬性進行標記。不過，我必須仔細閱讀規範才能知道。 –

是的，你可以在這裏看到這個動作：https://css-tricks.com/almanac/selectors/v/valid/ – Deryck

重申你的特殊性問題：匹配規則的相同的特殊性是按照它們的順序發生在源中，即最後的規則可以覆蓋先前規則的屬性。 –

空字符串，默認情況下，一個有效的值：

用戶代理應該允許用戶將值設置爲空字符串 *。

如果你想要求的字段中的值，你需要添加required屬性：

.v3_forms input[value=""] + span::after { 
 
    content: ""; 
 
} 
 
.v3_forms input:valid + span::after { 
 
    content: "\2713"; 
 
    color: limegreen; 
 
} 
 
.v3_forms input:invalid + span::after { 
 
    content: "X"; 
 
    color: #ce0000; 
 
}

<div class="v3_forms"> 
 
<input type="number" value="1" min="1" max="1000" step="1" pattern="\d" required /><span></span> 
 
</div>

這解決了你的問題的具體例子，但同樣的將適用於接受用戶輸入的任何<input />元素。

*請參閱whatwg參考。

來源

2015-07-11 06:15:10

輸入字段爲空時有效嗎？

回答

相關問題