Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Make Input Look And Behave Like A Link In Bootstrap Dropdown

Post a Comment
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-fileinput[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><scriptdata-require="bootstrap@*"data-semver="3.3.6"src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><scriptdata-require="jquery@*"data-semver="2.1.4"src="https://code.jquery.com/jquery-2.1.4.js"></script><linkdata-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" /><linkrel="stylesheet"href="style.css" /><scriptsrc="script.js"></script></head><body><divclass="btn-group pull-right open"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown"><spanclass="caret"></span></button><ulclass="dropdown-menu"><li><aclass="btn-file">
              Upload<inputtype="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"