試圖添加星號到所需的輸入字段

我不認爲我很明白:before和:after因爲我無法得到這個工作。我只是試圖在表單中的必填字段之後添加星號。試圖添加星號到所需的輸入字段

我的代碼很簡單：

<input id="name" type="text" required="required" autofocus="" placeholder="Name" autocomplete="off" value="" maxlength="40" class="required" name="name" /> 

/* Required field */ 
.required:after { 
    content: '*'; 
    color: #EF5F5F; 
}

這是爲什麼不工作？
我的小提琴此處並不意味着http://jsfiddle.net/3EFTN/

來源

2013-03-31 Steven

生成的內容被添加爲你將它添加到該項目的一個孩子。因此，瀏覽器正在這樣做（爲簡潔起見，跳過了一些屬性）：

<input class="required"> 
    <span class="after">*</span> 
</input>

這是無效的。

看看spec以更好地理解它（它有關於如何解釋它的例子）。

來源

2013-03-31 11:35:36

''不能這樣寫...這是一個自我結束標記，如''和'
' –

@AhmadAlfy - Alessandro只是演示了瀏覽器如何處理「css生成的代碼」。所以它是明知無效的代碼。所以不需要投票。 – Steven

@AhmadAlfy我知道，事實上我寫了代碼無效，我只是在解釋底下發生了什麼。 –

:after和:before選擇要使用的表單元素，如input，所以不可能用CSS來做到這一點。我建議使用jQuery，或者在元素之後添加另一個<span>。

來源

2013-03-31 11:27:58 Lemurr

啊，謝謝你的信息。我希望避免使用額外的span標籤。 – Steven

您的CSS正在嘗試添加<input>元素中的*，這是不可能的，因爲它不能包含任何其他元素。

讓我們把這種方式：:after意味着你的內容將被插入到和在您選擇的結束，:before意味着你的內容將被插入到和在你的元素的開始。

你可以在這裏找到一個很好的解釋：http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

來源

2013-03-31 11:33:42 wakooka

試圖添加星號到所需的輸入字段

回答

相關問題