：after僞不是在所有現代瀏覽器的工作，除了鉻

我創建一個HTML5的形式和我有以下的CSS中的所有現代瀏覽器的工作，除了瀏覽器：（！）：after僞不是在所有現代瀏覽器的工作，除了鉻

input:focus:required:invalid:after, textarea:focus:required:invalid:after { content: "!"; font-size: 20px; margin: -18px 0 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #c40000; } 

input:focus:required:valid:after, textarea:focus:required:valid:after { content: "\2713\0020"; font-size: 20px; margin: -18px -4px 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #009c00; }

這應該顯示一個感嘆號當輸入文本無效並且在所有其他瀏覽器中出現複選標記（✓），但由於某些原因，Chrome只是不喜歡它。

我試過使用：before僞代替建議here，但它也不起作用。該CSS顯示在Chrome的開發人員工具樣式中，但沒有任何顯示。請不要提示「爲什麼不使用小圖片而不是實際字符」，因爲這是不可接受的。所有其他建議非常感謝！ :)

來源

2013-06-05 ItsMIllerTime65

那是因爲你不應該在replaced content使用僞元素作爲它的內容不是由CSS定義的，而是在大多數情況下，OS（表單元素）。因爲這個原因，我會想象這些實現會因瀏覽器而異。

從Generated and Replaced Content Module:

替換元素不具備 '::之前' 和 '之後::' 僞元素;替換內容情況下的'內容'屬性將替換元素框的全部內容。

來源

2013-06-05 16:06:13 Adrift

當然，你可以*樣式*替換元素，但因爲我的報價暗示你不應該使用他們之前和之後的僞元素。 Chrome只是遵循指導原則.. – Adrift

對於任何低於HTML5和CSS3的東西都是如此。從HTML4開始，某些表單元素被允許使用CSS進行樣式化，並且由於HTML5和CSS3開發人員可以通過CSS獲得接近全部樣式的輸入，並且在現代瀏覽器上工作得很好。我已經看到很多情況下人們通過純CSS來表達元素的樣式：http://coding.smashingmagazine.com/2013/02/27/css-form-elements-problem/ http://www.onextrapixel.com/ 2012/10/26/custom-style-all-your-form-elements-with-pure-css-and-no-javascript/ – ItsMIllerTime65

呵呵現在我明白你在說什麼...... CSS將替換內容工作，但不是：僞元素。 – ItsMIllerTime65

猜猜我將不得不使用一些jQuery來讓它在Chrome和所有其他瀏覽器： http://api.jquery.com/after/

或雜散遠：僞類後，全面而只是把輸入框需要紅色或其他東西。

來源

2013-06-05 18:12:33 ItsMIllerTime65

：after僞不是在所有現代瀏覽器的工作，除了鉻

回答

相關問題