添加「必需的」文本通過CSS

HTML表單我有一個<form>，看起來像這樣：添加「必需的」文本通過CSS

<form> 
    <input type="text" name="name" id="name" /><span class="required"></span> 
</form>

我想要做的是顯示出一些文字，在<span>元素如*或Required，而不是「硬編碼」爲每個該等地方的文本，我需要的文本，以便形式看起來是這樣的：

[input box] Required

我GOOGLE了四周，發現它可以通過使用CSS樣式來實現如：

.required:before 
{ 
    content: "aaaa" 
}

不過，我應該使用這種技術（它是在例如每一個主要的瀏覽器支持）或有做這樣的事情更優選的方法是什麼？

感謝

UPDATE詩篇。我不想爲此使用JavaScript，只是普通的CSS。

來源

2010-09-09 Zabba

我同意在大多數情況下使用CSS添加內容是不正確的。但是，在視覺上突出顯示必填字段，我覺得完全可以這樣做。

content不被廣泛支持（IE在所有IIRC中都不支持它）。

你可能做的是「必需」範圍包含一個包含「必需」文本或星號的背景圖像。使用圖形文本有一些缺點，但沒有一個基於jQuery的解決方案也不具備。

來源

2010-09-09 07:09:36

請參閱我的評論@Pranay拉納以上。如果我使用「background-image」屬性，是不是與「content」屬性相同，唯一的區別是，在「內容」的情況下，我添加一個字符串和「background-image」我添加圖片？「內容」也不是，但都增加了一些視覺呈現的「數據」，對吧？ – Zabba 2010-09-09 07:25:48

@Zabba嚴格來說，是的。這與分離內容和表達的理念不符。但是，如果這對你有效，考慮到所有缺點（圖形文本在屏幕閱讀器中不可讀，不會被打印等），我傾向於說它並不重要。 – 2010-09-09 07:30:37

@Zabba：區別在於'background-image'被廣泛支持。 – mpen 2010-09-09 07:34:53

我認爲你應該看JavaScript。將內容添加到具有特定類/ ID的標記是JavaScript的一個用途。有許多庫可以加速開發時間 - jQuery，Prototype，Dojo和MooTools。

來源

2010-09-09 06:59:55 Extrakun

感謝Extrakun，我應該提到我想爲此避免使用JavaScript。更新了問題。 – Zabba 2010-09-09 07:03:15

我不認爲除JavaScript以外還有其他客戶端解決方案。然後你可能想看看服務器端編程，它允許你使用模板和一些簡單的編程來複制內容。 – Extrakun 2010-09-09 07:06:06

你可以使用jQuery這個東西。

jQuery是一個JavaScript庫：

寫在標題此代碼

$(document).ready(function(){ 
    $(span[class=required]).innerText='<sometext>'; 
});

但你必須下載這個插件。但你也可以使用JavaScript太

來源

2010-09-09 07:02:47 AEMLoviji

這是一個完美的解決方案，即使是代碼示例：+1。考慮使用「你」而不是「你」，它會讓你的寫作風格看起來更加成熟 – 2010-09-09 07:53:38

對我來說不起作用（語法錯誤）。其中一種方法是： $（document）.ready（function（）{ $（'span.required'）。text（'*'）; }）; – jarmod 2013-02-20 16:54:15

絕對不應該使用CSS來做到這一點！上帝不！：p

如上所述使用JavaScript - 但如果你想避免這一點，那麼你必須使用服務器端腳本 - 所以學習一些PHP。

來源

2010-09-09 07:05:47

+1處理服務器端 – cjk 2010-09-09 07:07:29

爲什麼感謝你。 :) – 2010-09-09 07:11:45

我不同意在這個特定的情況下：開始使用服務器端語言來構建表單比一點CSS渲染，比如說星號要容易得多。但總的來說，你是對的。 – 2010-09-09 07:36:19

檢查：Content

ASLO檢查此兼容性 alt text

不要使用

我覺得我們不應該使用內容的聲明都沒有。它將內容添加到頁面，而CSS則用於向頁面添加演示文稿，而不是內容。因此，如果您想動態生成內容，我覺得您應該使用JavaScript。 CSS是這項工作的錯誤工具。

來源

2010-09-09 07:07:24

微軟再次罷工...... :( – 2010-09-09 07:12:35

但是，如果CSS僅用於演示文稿，CSS有內容屬性的原因是什麼？我使用Google搜索到W3C（http://www.w3.org/TR/2009/CR- CSS2-20090908/generate.html＃propdef-content），它說：「生成的內容不會改變文檔樹，特別是它不會反饋到文檔語言處理器（例如，用於重新分析）」。它是真正的「演示文稿」，而不是添加「內容」的頁面，對嗎？ – Zabba 2010-09-09 07:22:41

我不認爲我買這個論點，它不應該被使用，因爲它添加「內容」的頁面。所需要的「blurb沒有內容超過背景圖像，圖標或CSS已經傳達的信息色彩，不應該用於插入段落，但對於這樣的事情，我認爲它完全符合語義。 IE不支持它，我會做的是使用darn標籤，然後我們JS去fi只有在破碎的瀏覽器中。 – mpen 2010-09-09 07:33:03

正如其他人所指出的CSS可以做到這一點，但它並沒有完全支持，它也不是解決這個問題的正確方法。如果顯示「必需」文本至關重要，那麼您必須將其添加到HTML中。在某種程度上，Javascript是一個合適的解決方案，但前提是您無法編輯源代碼。雖然內容可以使用JS生成，但顯然只有啓用了JavaScript的用戶纔會看到，並且增加了維護的複雜性。如果有人在五年的時間內在頁面上出現代碼更改，他們最初會想知道「所需」文本的來源。

這將是相當快，相當工整將是給跨度星號的背景圖像和包括上述表單的關鍵另外一個選擇：

* required field

來源

2010-09-09 07:36:33

我喜歡這部分內容「當有人在五年的時間裏查看頁面來更改代碼」 - 謝謝，沒有想到那個角度。 – Zabba 2010-09-09 07:44:27

你真的應該在添加此文字HTML。其他解決方案無法訪問 - 例如，不具備視力的用戶不會意識到該字段是必需的。

來源

2010-09-09 08:14:41

添加「必需的」文本通過CSS

回答

相關問題