How to hide Fileupload with simple span by using css

Tags: css

Problem :

I am using this file uploader But due to some reason Add Files button also show the file upload. I want to hide them like a link. Current look

I copied the same css which they use

 <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Add files...</span>
        <input type="file" name="files[]" multiple>

.fileinput-button {
  position: relative;
  overflow: hidden;

 .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;

input[type="file"] {
display: block;      

Solution :

Try with : visibility: hidden ;)

    CSS Howto..

    How to make div access the remaining space without using fixed height values?

    How do I align 2 divs (each has its own padding) next to each other?

    How to make div css background hover

    CSS div element - how to show horizontal scroll bars only?

    How to hide crossed-out CSS lines on firebug?

    How to add image after button/div css?

    how to give multiple colors in the same cell in a full calendar?

    css in firefox and ie is rendering old css file…chrome shows new css just fine

    How to use css in extjs to modify the “browse files” button?

    How to apply CSS to a DialogBox using ClientBundle?

    How do I make CSS hover transitions animate on mouse off AND mouse over, and replicate that in jQuery?

    How to specify which element to change background color jquery

    How to make a close button for each image inside the div using CSS and js

    How to change my Mercurial web interface aspect

    How to properly position a Bootstrap carousel-caption?

    How can I center an unknown number of block elements of unknown widths in a block container of an unknown width?

    How to apply css selector in ZK

    How to use two JavaScript (.js) files on one website?

    How to Change the Color of Selected Content

    how to put css in selected row in angular js?

    How to attach user CSS to Microsoft Edge?

    How to add Background Image in css using master page

    How to apply multiple css transform properties using Jquery

    How to force elements to stay in the same row

    How to implement a table structure using CSS

    Android App with HTML/CSS/jQuery. [How] Can it be done?

    How to style a selected radio button AND include space as clickable?

    How to fix “Blocked loading mixed active content” for css and js over https

    How to create a pixel perfect divider using css border [closed]

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)