样式输入类型=文件未按预期工作 [英] Styling input type=file not working as expected

问题描述

我正在为表单类型创建一个css模板，并希望给表单输入一个圆角边框。这适用于type = text，但不适用于type = file（用于文件上传）。

我做错了什么？

  .tempform input [type =text] {
 -moz-border-radius：10px; 
} 
 
 .tempform input [type =file] {
 -moz-border-radius：10px; 
} 
 
< div class =tempform> 
< label for =textfield>测试文本字段< / label> 
< input type =textid =textfieldname =textfield>< / div> 
< / div> 
 
 div class =tempform> 
< label for =filefield>测试文件字段< / label> 
< input type =filename =filefieldid =filefield-0> 
< input type =filename =filefieldid =filefield-1> 
< / div>不幸的是，不可能对文件上传输入进行风格化，因为这样做是不可能的，除了改变宽度一点。浏览器不允许任何其他更改。如果你想对你的文件上传输入进行风格化，你必须使用一个令人讨厌的黑客，比如在图片上面放置一个几乎不可见的文件上传输入（只在某些浏览器中工作），或者一个JavaScript解决方案，例如 ajax-upload 。
 
I'm creating a css template for form types and want to give form inputs a rounded border. This works well with type=text but doesn't work with type=file (for file upload). 

What am I doing wrong? 
.tempform input[type="text"] {
  -moz-border-radius: 10px;
}

.tempform input[type="file"] {
  -moz-border-radius: 10px;
}

<div class="tempform">
   <label for="textfield">Test Text Field</label>
   <input type="text" id="textfield" name="textfield"></div>
</div>

div class="tempform">
   <label for="filefield">Test File Field</label>
   <input type="file" name="filefield" id="filefield-0">
   <input type="file" name="filefield" id="filefield-1">
</div>

解决方案
Unfortunately, it's impossible to style a file upload input, besides changing the width a little bit. Browsers just don't allow any other change. If you want to style your file upload input, you'll have to use a nasty hack like placing an almost invisible file upload input on top of an image (which only works in some browsers), or a JavaScript solution like ajax-upload.

                        
这篇关于样式输入类型=文件未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！