使输入看起来和行为像引导程序下拉菜单中的链接 [英] make input look and behave like a link in bootstrap dropdown
本文介绍了使输入看起来和行为像引导程序下拉菜单中的链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的示例中是一个引导下拉菜单，其中包含一个链接和一个文件类型的输入按钮.如何调整 css 以使上传"选项的外观和行为类似于创建文件夹"和删除文件夹"选项?
.btn-file {位置:相对；溢出:隐藏；}.btn-文件输入[类型=文件] {位置:绝对；顶部:0；右:0；最小宽度:100%；最小高度:100%；字体大小:100px；文本对齐:右；过滤器:阿尔法(不透明度= 0)；不透明度:0；大纲:无；背景:白色；游标:继承；显示:块；}<头><script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><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><身体><div class="btn-group pull-right open"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><ul class="下拉菜单"><li><span class="btn btn-file">上传</span><li><a>创建文件夹</a><li><a>删除文件夹</a></html>
解决方案
如何移除你的 btn 类并将你的 span 变成一个 a 标签作为引导样式使用这个CSS 选择器:.dropdown-menu >立>一个
.btn-file {位置:相对；溢出:隐藏；}.btn-文件输入[类型=文件] {位置:绝对；顶部:0；右:0；最小宽度:100%；最小高度:100%；字体大小:100px；文本对齐:右；过滤器:阿尔法(不透明度= 0)；不透明度:0；大纲:无；背景:白色；光标:文本；显示:块；}<头><script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><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><身体><div class="btn-group pull-right open"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><ul class="下拉菜单"><li><a class="btn-file">上传</a><li><a>创建文件夹</a><li><a>删除文件夹</a></html>
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>
解决方案
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>
这篇关于使输入看起来和行为像引导程序下拉菜单中的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
