可在此处引用:http://web.cs.dal.ca/~selig/serverside/assignment2/
我正在尝试创建一个外观更漂亮的文件上传按钮。它在普通的桌面浏览器上工作得很好,但在 iOS 上,点击它会改变按钮的边框半径,基本上使它变成一个不同的按钮。
我自定义它的实现非常简单,我将在下面包含代码。基本上,原始框覆盖了具有绝对位置、设置的宽度和高度以及设置为 0 的不透明度的自定义框。然后我使用一些 jQuery 来自定义点击状态。
HTML:
<div class="upload">
<input type="file" class="file-input">
<input type="button" value="Browse">
<span class="filename">No file selected</span>
</div>
CSS:
.upload {
position: relative;
margin: 0 auto 15px auto;
width: 400px;
height: 50px;
background: #fffbed;
border: 1px solid #efdec4;
border-radius: 5px;
-webkit-box-shadow: 0px 2px 4px rgba(236, 229, 199, 0.3), inset 0px 0px 3px 1px rgba(236, 229, 199, 0.5);
box-shadow: 0px 2px 4px rgba(236, 229, 199, 0.3), inset 0px 0px 3px 1px rgba(236, 229, 199, 0.5);
}
input[type="file"] {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
moz-opacity: 0;
opacity: 0;
}
input[type="button"] {
width: 120px;
height: 50px;
float: right;
border: 1px solid #4b2218;
border-radius: 5px;
color: #ffecf7;
font-size: 1em;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
background: #a35a47; /* Old browsers */
background: -moz-linear-gradient(top, #a35a47 0%, #a04731 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a35a47), color-stop(100%,#a04731)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a35a47 0%,#a04731 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a35a47 0%,#a04731 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a35a47 0%,#a04731 100%); /* IE10+ */
background: linear-gradient(to bottom, #a35a47 0%,#a04731 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a35a47', endColorstr='#a04731',GradientType=0 ); /* IE6-8 */
}
在 jsFiddle 中尝试之后,我发现悬停和单击事件的 jQuery 代码是导致 broder-radius 发生变化的原因。我想出了一个解决方案,如果您使用的是 iPhone/iPod touch,它只会禁用悬停/点击事件。这是javascript:
$(document).ready(function() {
$(".upload").hover(
function() {
$("input[type='button']").css("background", "#843c2b");
},
function() {
$("input[type='button']").css({
"background": "#a35a47"
});
}
);
$(".upload").click(function() {
$("input[type='button']").css("background", "#683022");
});
if(isiPhone()){
$(".upload").unbind("click").unbind("hover");
}
});
function isiPhone(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
return true;
}
return false;
}
和 jsFiddle: http://jsfiddle.net/SEexe/36/
我是一名优秀的程序员,十分优秀!