僞元素（：之後）不在FF/IE中工作，但在Chrome中工作？

Question

看到這個Codepen：

http://codepen.io/anon/pen/wcybk

按鈕是否工作在Chrome，而不是IE/FF

<input name="input_15" id="input_6_15" class="medium" tabindex="8" type="file"> 
#input_6_15{position:relative;} 
#input_6_15:after { 
content: "Upload Media"; 
width: 150px; 
height: 20px; 
background: none repeat scroll 0% 0% #626D2D; 
display: block; 
position: absolute; 
padding: 8px 5px 10px; 
color: #FFF; 
visibility: visible; 
top: 4px; 
left: -38px; 
text-transform: uppercase; 
text-align: center; 
line-height: 26px; 
z-index: 99999999; 
} 

Answer 1

我發現，Firefox和IE也很難與投入撕心裂肺僞元素（更多關於這裏：Bug 724369 - :after :before pseudo elements for input elements）。

我的解決方案是使用這樣的：

@ -moz-文檔的URL前綴（）{// Firefox的代碼在這裏 }

和目標輸入元素的div容器代替。