Html 在css中为文件上传按钮添加样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14401550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding style to file upload button in css
提问by sonam
I have a text field and button with following css:
我有一个带有以下 css 的文本字段和按钮：
JS fiddle link : http://jsfiddle.net/Tdkre/
JS小提琴链接：http: //jsfiddle.net/Tdkre/
.submit {
-moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
-webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
box-shadow:inset 0px 1px 0px 0px #cae3fc;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #469df5;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:14px;
font-weight:bold;
padding:5px 14px;
text-decoration:none;
text-shadow:1px 1px 0px #287ace;
cursor:pointer;
}
.submit:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
background-color:#4197ee;
}
.submit:active {
position:relative;
top:1px;
}
.text-input {
padding: 6px;
font-size: 13px;
border: 1px solid #d5d5d5;
color: #333;
border-radius: 4px 4px 4px 4px !important;
}
<form>
<input type="text" class="text-input" size="40"/>
<input type="button" value="Upload" id="upload" class="submit"/>
</form>
I want to add the same style to the file upload input type. I am a css beginner. How can i use this style to file upload button?
我想在文件上传输入类型中添加相同的样式。我是一个css初学者。我如何使用这种样式来文件上传按钮？
采纳答案by sonam
I tried this it looks pretty good to me. Are there any flaws with this? Here is the jsfiddle link http://jsfiddle.net/Tdkre/1/
我试过这个对我来说看起来很不错。这有什么缺陷吗？这是 jsfiddle 链接http://jsfiddle.net/Tdkre/1/
#FileUpload {
position:relative;
}
#BrowserVisible {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background:url(upload.png) 100% 1px no-repeat;
width:345px;
height:30px;
}
#FileField {
width:250px;
margin-right:85px;
padding: 6px;
font-size: 13px;
background: #fff url('bg-form-field.gif') top left repeat-x;
border: 1px solid #d5d5d5;
color: #333;
border-radius: 4px 4px 4px 4px !important;
}
#BrowserHidden {
position:relative;
width:345px;
height:30px;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>
Here are the images
这是图片
回答by Seven
Try this solution: http://jsfiddle.net/JJRrc/1/
试试这个解决方案：http: //jsfiddle.net/JJRrc/1/
Html
html
<p class="form">
<input type="text" id="path" />
<label class="add-photo-btn">upload
<span>
<input type="file" id="myfile" name="myfile" />
</span>
</label>
</p>
CSS
CSS
.form input[type="file"]{
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
left:0;
}
.add-photo-btn{
position:relative;
overflow:hidden;
cursor:pointer;
text-align:center;
background-color:#83b81a;
color:#fff;
display:block;
width:197px;
height:31px;
font-size:18px;
line-height:30px;
float:left;
}
input[type="text"]{
float:left;
}
JQuery
查询
$('#myfile').change(function(){
$('#path').val($(this).val());
});
回答by Ivotje50
You could also use jQuery, like this:
您也可以使用 jQuery，如下所示：
<img id="image" style="cursor:pointer;" src="img.jpg" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>
And this jquery code
还有这个jquery代码
$("#image").click(function(){
$("#photosubmit").click();
});
Hopes this helps someone too!
希望这也能帮助别人！
回答by dinker127
try this:
尝试这个：
In your css file put this on the end of file or somewhere else: input[type="file"]::-webkit-file-upload-button.
This syntax is only for button style.
在您的 css 文件中，将其放在文件末尾或其他位置：input[type="file"]::-webkit-file-upload-button. 此语法仅适用于按钮样式。
If you put there only: input[type="file"]you can style the array where you have filename.
如果你只放在那里：input[type="file"]你可以在你有文件名的地方设置数组的样式。
回答by Octopus
I run this relatively short jQuery on my page that contains one or more unaltered html <input type="file">elements.
我在包含一个或多个未更改的 html<input type="file">元素的页面上运行这个相对较短的 jQuery 。
The jQuery will hide the elements and insert new ones where appropriate that mimic the same behaviour.
jQuery 将隐藏元素并在适当的地方插入模仿相同行为的新元素。
This answer is similar to others on the page but has been tested in IE browsers as well as the ones whose developer's actually take the time to support carefully considered web standards.
此答案与页面上的其他答案类似，但已在 IE 浏览器以及开发人员实际花时间支持经过仔细考虑的 Web 标准的浏览器中进行了测试。
$(document).ready(function(){
// replace all file upload elements for styling purposes
$('input[type="file"]').each(function(){
var btn = $('<button class="file">Browse...</button>');
var txt = $('<span class="file"></span>');
$(this).after(txt).after(btn);
$(this).css({display:'none'});
var target = this;
$(btn).click(function(ev){
ev.preventDefault();
$(target).click();
})
$(target).change(function(){
// IE uses a stupid renaming scheme that includes "fake-path"
var fname = $(target).val()
$(txt).html(fname.substr(fname.lastIndexOf('\')+1));
});
});
});
Now you just need to style button.fileand span.fileas you like and you are good to go.
现在，你只需要风格button.file和span.file你喜欢，你是好去。
回答by Per Salbark
It is notoriously hard to style file upload buttons, but if you are willing to use jQuery and a plugin I've found this oneto be very useful.
设计文件上传按钮的样式是出了名的困难，但是如果您愿意使用 jQuery 和插件，我发现这个非常有用。
It gives you the posibility to "fake" file upload button functionality on any DOM element, so you can style it any way you want. Works well in all major browsers including old IE versions.
它为您提供了在任何 DOM 元素上“伪造”文件上传按钮功能的可能性，因此您可以随意设置样式。适用于所有主要浏览器，包括旧版 IE。
回答by milan kyada
Here is a link. You can change style of button.
这是一个链接。您可以更改按钮的样式。
HTML
HTML
<button>upload</button>
<input type="text" id="f" disabled="disabled" />
<input id="html_btn" type='file' " /><br>
CSS
CSS
button {
border-radius:10px;
padding:5px;
}
#html_btn {
display:none;
}
Javascript
Javascript
$('button').bind("click", function () {
$('#html_btn').click();
});
$('#html_btn').change(function () {
document.getElementById("f").value = $('#html_btn').val();
});
回答by Super Model
Simple Solution: Custom file upload button with css only
简单的解决方案：仅使用 css 自定义文件上传按钮
.fileUpload input[type=file]{
display:none;
}
.btn{
background-color:#e3e3e3;
color:#333;
border:1px solid #e6e6e6;
border-radius:3px;
padding:6px 12px;
font-size:16px;
}<label class="btn fileUpload btn-default">
Browse <input type="file" hidden="">
</label>