使輸入外觀和行爲像引導下拉鍊接

在下面的示例中是一個引導下拉菜單，其中包含一個鏈接和一個類型爲文件的輸入按鈕。如何修改CSS以使「上傳」選項的外觀和行爲與「創建文件夾」和「刪除文件夾」選項類似？使輸入外觀和行爲像引導下拉鍊接

.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="[email protected]*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <link data-require="[email protected]" 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>

來源

2016-02-04 Tomd

如何刪除您的BTN類，並把您的span到使用這個CSS選擇器的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="[email protected]*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <link data-require="[email protected]" 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>

來源

2016-02-04 12:08:12 kravits88

看起來不錯，雖然是curso r仍然不同.... – Tomd

只是將光標css改爲「文本」。我通常使用鏈接和按鈕的「指針」。 – kravits88

使輸入外觀和行爲像引導下拉鍊接

回答

相關問題