2011-01-12 37 views

回答

12

可以使用after僞類:

​​

,或者因爲你明確地要求與該類一個div:

div.required:after { content: "*"; } 

,就可以(爲IE只因爲IE8)


當然,您可以將任何樣式應用於此。你甚至可以做這樣的事情:

div.required:after:hover { /* Hello, I'm a geek. */ } 

這也可以用JavaScript實現。 jQuery的:

$(".required").append("*"); 
+0

機器或以*嚴重*的方式... – 2011-01-12 23:23:55

2

您可以使用此:afterbefore CSS僞元素,更多的信息,也ABT哪些瀏覽器支持here

1

試試這個頁面:

<html> 

<style> 
.required:after { 
    color: red; 
    content: "*" 
} 
</style> 

<body> 

<div class="required">Name</div> <input type="text"> 
<div class="required">Email</div> <input type="text"> 

</body> 

</html> 

: 是:之後被除IE(希望IE9將支持)可能一切

更新考慮到森達維達斯的帳戶評論瞭解只是使用的例子。當然,這會帶來更多的意義,如果我們做出這樣說:

.required:before { 
    color: red; 
    content: "*" 
} 
.... 
<div>Name <input type="text" class="required"> </div> 

那麼我們甚至可以添加不顯眼的JavaScript驗證該字段(所以這種方式帶來了良好的優勢)。問題是,這個重構頁面將會顯示,因爲我們只希望它在Opera中(我檢查了所有瀏覽器的最新版本,除了FireFox 4,但我不確定FF會改變他們考慮這種風格的方式)。
:之後和:之前不工作的輸入和img元素; there is相關的討論爲什麼。 $(「。required」).jquery之前的(「*」)可以在任何地方工作,但這更多的是關於JavaScript和CSS(之前被其他人提到)。

+0

如果您將INPUT元素放入DIV內,這會更有意義。 – 2011-01-12 21:37:29

1

您可以通過CSS添加恆星圖像。這應該適用於所有瀏覽器。

.required 
{ 
background-image:url(/path/to/your/images/dir/required-field.png); 
background-position:top right; 
background-repeat:no-repeat; 
padding-right:10px; 
} 
相關問題