仅在asp.net FileUpload Control的Browse按钮上应用css

我有这样的FileUpload控件

现在我想只在Browse按钮部分应用css

我怎样才能做到这一点？

Answer 1

使用type="file" input标记的样式需要一些工作，当您尝试不幸地设置样式时，浏览器的行为并不相似。

有几种方法可以这样做：

• http://www.quirksmode.org/dom/inputfile.html
• http://www.appelsiini.net/projects/filestyle

Answer 2

显然你不能直接使用CSS来设置它们，但你可以“破解”一种新的风格 – 阅读以下文章了解详情

http://www.quirksmode.org/dom/inputfile.html

Answer 3

您可以使用以下代码更改FileUpload控件。

步骤1 ：在aspx页面上使用此代码更改FileUpload控件

  Upload Image    

第2步 ：现在将以下CSS代码添加到主CSS文件中

 .file-upload { display: inline-block; overflow: hidden; text-align: center; vertical-align: middle; font-family: Arial; border: 1px solid #124d77; background: #007dc1; color: #fff; border-radius: 6px; -moz-border-radius: 6px; cursor: pointer; text-shadow: #000 1px 1px 2px; -webkit-border-radius: 6px; } .file-upload:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1)); background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%); background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%); background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%); background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%); background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0); background-color: #0061a7; } /* The button size */ .file-upload { height: 30px; } .file-upload, .file-upload span { width: 90px; } .file-upload input { top: 0; left: 0; margin: 0; font-size: 11px; font-weight: bold; /* Loses tab index in webkit if width is set to 0 */ opacity: 0; filter: alpha(opacity=0); } .file-upload strong { font: normal 12px Tahoma,sans-serif; text-align: center; vertical-align: middle; } .file-upload span { top: 0; left: 0; display: inline-block; /* Adjust button text vertical alignment */ padding-top: 5px; } 

完成。

Answer 4

看看这个video，你必须添加一个额外的按钮，但它的工作原理https://youtu.be/_O9YVO-Z-Xo