• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

input的默认文件名称怎么修改_CSS学习

当前位置：网站建设 > 技术支持

input的默认文件名称怎么修改？

1

打开编辑器，创建一个HTML文档，并且设立基本架构。

2

<form>

<input type="file">

</form>

我们引入input标签的时候，会发现浏览器会自动显示文字，这是默认的名字。

3

<input type="button" value="上传点这里" onclick="javascript:$('input[name=\'file\']').click();" />

<input name="fileName" readonly />

<input type="file" onchange="javascript:$('input[name=\'fileName\']').val(this.files[0].name);" />

我们这里实际可以另外创建一个button和file，利用js的功能。

但是这里就多了一个旧的功能了。

4

style="display: none;"

这个时候我们需要加入这个样式来取消掉旧的显示。

5

当然我们也可以用CSS来指定样式，这里新建一个CSS文档，并与HTML文档相关联。

6

<form class="main">

<input class="file" type="file">

<a href="#">上传图片</a>

</form>

.main{

overflow:hidden;

position:absolute

}

.file{

position:absolute;

z-index:200;

margin-left:-200px;

opacity:0;

filter:alpha(opacity=0);

margin-top:-50px;

}

这里我们添加一个a链接，然后就可以依靠这个a链接来上次文件，主要要清除掉原来的文字。

7

a {

text-decoration:none;

border: 0.5px solid blue;

}

为了更接近原来的样式，我们可以修改一下a链接的样式。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。