2

In the sample below is a bootstrap drop down menu with a link and an input button of type file. How can the css be adjsuted to make the "Upload" option look and behave like the "Create Folder" and "Delete Folder" option?

.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>
kravits88
  • 12,431
  • 1
  • 51
  • 53
Tomd
  • 193
  • 1
  • 10

1 Answers1

3

How about removing your btn class and turning your span into an a tag as bootstrap styles using this CSS selector: .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>
kravits88
  • 12,431
  • 1
  • 51
  • 53