首页 > 软件开发 > HTML >

input file 如何更改默认文字

来源:互联网 2023-03-16 19:15:54 91

input file 如何更改默认文字,input是HTML里面的重要标签,file则是其属性,那么file实际上是让用户可以上传文件功能,但是要提示用户,就要显示文字,实际文字有很多种,我们也可以修改自己想要的文字。gmj办公区 - 实用经验教程分享!

input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

工具/原料

  • sublimet text 3
  • chrome浏览器
  • windows 7

方法/步骤

  • 1

    打开编辑器,创建一个HTML文档,并且设立基本架构。gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

  • 2

    form>gmj办公区 - 实用经验教程分享!

    input type="file">gmj办公区 - 实用经验教程分享!

    /form>gmj办公区 - 实用经验教程分享!

    我们引入input标签的时候,会发现浏览器会自动显示文字,这是默认的名字。gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

  • 2此文章未经许可获取自百度经验
  • 3

    input type="button" value="上传点这里" onclick="javascript:$('input[name=\'file\']').click();" />gmj办公区 - 实用经验教程分享!

    input name="fileName" readonly />gmj办公区 - 实用经验教程分享!

    input type="file" onchange="javascript:$('input[name=\'fileName\']').val(this.files[0].name);" />gmj办公区 - 实用经验教程分享!

    我们这里实际可以另外创建一个button和file,利用js的功能。gmj办公区 - 实用经验教程分享!

    但是这里就多了一个旧的功能了。gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

  • 4

    style="display: none;"gmj办公区 - 实用经验教程分享!

    这个时候我们需要加入这个样式来取消掉旧的显示。gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

  • 5

    当然我们也可以用CSS来指定样式,这里新建一个CSS文档,并与HTML文档相关联。gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

  • 6

    form class="main">gmj办公区 - 实用经验教程分享!

    input class="file" type="file">gmj办公区 - 实用经验教程分享!

    a href="#">上传图片/a>gmj办公区 - 实用经验教程分享!

    /form>gmj办公区 - 实用经验教程分享!

    .main{gmj办公区 - 实用经验教程分享!

    overflow:hidden;gmj办公区 - 实用经验教程分享!

    position:absolutegmj办公区 - 实用经验教程分享!

    }gmj办公区 - 实用经验教程分享!

    .file{gmj办公区 - 实用经验教程分享!

    position:absolute;gmj办公区 - 实用经验教程分享!

    z-index:200;gmj办公区 - 实用经验教程分享!

    margin-left:-200px;gmj办公区 - 实用经验教程分享!

    opacity:0;gmj办公区 - 实用经验教程分享!

    filter:alpha(opacity=0);gmj办公区 - 实用经验教程分享!

    margin-top:-50px;gmj办公区 - 实用经验教程分享!

    }gmj办公区 - 实用经验教程分享!

    这里我们添加一个a链接,然后就可以依靠这个a链接来上次文件,主要要清除掉原来的文字。gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

  • 7

    a {gmj办公区 - 实用经验教程分享!

    text-decoration:none;gmj办公区 - 实用经验教程分享!

    border: 0.5px solid blue;gmj办公区 - 实用经验教程分享!

    }gmj办公区 - 实用经验教程分享!

    为了更接近原来的样式,我们可以修改一下a链接的样式。gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

    input file 如何更改默认文字gmj办公区 - 实用经验教程分享!

  • 注意事项

    • 不同的浏览器显示的默认文字是不一样的

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!gmj办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码