Make Input Look And Behave Like A Link In Bootstrap Dropdown
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 'Cr
Solution 1:
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>
Post a Comment for "Make Input Look And Behave Like A Link In Bootstrap Dropdown"