下面的示例是一个 Bootstrap 下拉菜单，其中包含一个链接和一个文件类型的输入按钮。如何调整 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="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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a2ffb1a1a192e1fce1fce4" rel="noreferrer noopener nofollow">[email protected]</a>" 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>最佳答案
如何使用以下 CSS 选择器删除 btn 类并将 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcadf0beaeae9deef3eef3eb" rel="noreferrer noopener nofollow">[email protected]</a>" 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>关于html - 使输入的外观和行为类似于 Bootstrap 下拉列表中的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35200075/