修改选择文件文本框及按钮样式

最新推荐文章于 2022-08-14 16:16:44 发布

原创最新推荐文章于 2022-08-14 16:16:44 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

表单验证专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的HTML文件上传组件实现方案，通过按钮触发文件选择对话框，并将选中文件路径显示在输入框中。该组件利用了HTML和JavaScript的基础功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>选择文件</title>
    <style>
      .u-btn-selectfile{
        background: #eee;
        border: none;
        /*color: #ffffff;*/
        font-weight: bold;
      }
      .u-btn-selectfile:focus{
        outline: 0;
      }
      .u-btn-selectfile span{
        position: relative;
        top: -3px;
      }
    </style>
  </head>
  <body>
    <span>选择文件：</span>
    <input type="text" size="20" name="upfile" id="upfile" class="u-input-version"/>
    <button type="button" onclick="path.click()" class="u-btn-selectfile">
      <span>...</span>
    </bttton>
    <input type="file" id="path" style="display:none" onchange="upfile.value=this.value"/>
  </body>
</html>