Question

下面的示例是一个bootstrap下拉菜单，其中包含一个链接和一个类型为file的输入按钮。怎样才能调整css来实现＆＃34;上传＆＃34;选项外观和行为类似于＆＃34;创建文件夹＆＃34;和＆＃34;删除文件夹＆＃34;选项？

＆＃13;

.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;
    }

＆＃13;

<!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>

＆＃13;

Answer 1

如何使用此CSS选择器移除您的btn类并将span转换为a标签作为引导样式：.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下拉列表中的链接

1 个答案: