我想在html中添加输入来上传图片我的问题是按钮旁边显示的消息,我想删除它我怎么能这样做? 这个链接显示了我的问题:
<input type='file'></input>
我还希望将按钮上的写入从浏览更改为其他可能的内容吗?
答案 0 :(得分:0)
没有跨浏览器的方式来做到这一点。 “没有文件选择”文本位于窗口小部件的实现定义部分中,我不相信大多数浏览器提供了特定于浏览器的自定义方式。另一方面,当value属性为空时,您可以简单地使用CSS来覆盖文本。
但是,您可以查看下面给出的演示链接。它可能会对你有帮助。
Big button (not hidden so you can see what's going on)
<div class="inputWrapper" style="height: 48px; width: 128px;">
<input class="fileInput" type="file" name="file1"/>
</div><br/>
Big button (file input is hidden)
<div class="inputWrapper" style="height: 56px; width: 128px;">
<input class="fileInput hidden" type="file" name="file2"/>
</div><br/>
Medium button (this one has text)
<div class="inputWrapper" style="height: 48px; width: 96px;">
Upload File
<input class="fileInput hidden" type="file" name="file3"/>
</div><br/>
Smaller button
<div class="inputWrapper" style="height: 24px; width: 24px;">
<input class="fileInput hidden" type="file" name="file4"/>
</div>
Javascript:
/ 您可以使用一些jQuery通过更改背景颜色/图像,字体大小/重量/颜色等来模拟按钮效果。 / < / p>
$(function() {
$(".inputWrapper").mousedown(function() {
var button = $(this);
button.addClass('clicked');
setTimeout(function(){
button.removeClass('clicked');
},50);
});
});
Css:
.inputWrapper {
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
/*This makes the button huge so that it can be clicked on*/
font-size:50px;
}
.hidden {
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
/*Dynamic styles*/
.inputWrapper:hover {
background-color: #FDD;
}
.inputWrapper.clicked {
background-color: #A66;
}
body {
font-family:Helvetica;
}
否则Jus检查演示..