在css中为文件上传按钮添加样式 [英] Adding style to file upload button in css
本文介绍了在css中为文件上传按钮添加样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个文本字段和按钮与以下css:
I have a text field and button with following css:
JS fiddle链接: http://jsfiddle.net/Tdkre/
JS fiddle link : 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?
推荐答案
我试过这个看起来不错。这有什么缺陷吗?
这里是jsfiddle链接 http://jsfiddle.net/Tdkre/1/
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/
#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>
$ b
Here are the images
这篇关于在css中为文件上传按钮添加样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文