使输入看起来和行为像 bootstrap 下拉列表中的 link

Question

在下面的示例中是一个 bootstrap 下拉菜单，带有 link 和一个文件类型的输入按钮。如何调整 css 以使 "Upload" 选项的外观和行为类似于 "Create Folder" 和 "Delete Folder" 选项？

.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

<!DOCTYPE html>
<html>

  <head>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="btn-group pull-right open">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li>
          <span class="btn btn-file">
                     Upload<input type="file" />
          </span>
        </li>
        <li>
          <a>Create Folder</a>
        </li>
        <li>
          <a>Delete Folder</a>
        </li>
      </ul>
    </div>
  </body>

</html>

Answer 1

如何删除你的 btn class 并使用这个 CSS 选择器将你的 span 变成一个 a 标签作为 bootstrap 样式：.dropdown-menu > li > a

.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: text;
        display: block;
    }

<!DOCTYPE html>
<html>

  <head>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="btn-group pull-right open">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li>
          <a class="btn-file">
              Upload<input type="file" />
          </a>
        </li>
        <li>
          <a>Create Folder</a>
        </li>
        <li>
          <a>Delete Folder</a>
        </li>
      </ul>
    </div>
  </body>

</html>

使输入看起来和行为像 bootstrap 下拉列表中的 link

make input look and behave like a link in bootstrap dropdown

html

css

twitter-bootstrap