CODEWITHSUNDEEP
css
Snippet
Snippet

Reputation: 1560

Align Input file on Bootstrap input text

i have tried designing my own input file base on this fiddle i need to align properly the button in input text of a bootstrap.

this is my code to design my input type. also the button of bootstrap is not aligning.

.forUplBtn {
    background-color:#427db8; 
    width:50px;

    display:inline-block;
    border: none;
    color: #fff; 
    padding:5px 20px 5px 20px;
    border:none;
    overflow:hidden;
    text-align:center;
    position:relative;
    margin:0;
}
.forUplBtn a{
    z-index:-1;
}



.forUplBtn input[type="file"]{
    /*margin-left:-145px;*/
    width: 100%;height:100%; position:absolute; left:0;top:0; opacity:0
}

Upvotes: 0

Views: 1313

Answers (2)

Praveen
Praveen

Reputation: 56509

Add the below css to your code

button {
     position: absolute;
     margin-left: -90px;
     width: 90px;
     margin-top:4px
 }

Check this Fiddle

Also check Jasny's fork Bootstrap for file upload, easy to integrate.

Upvotes: 1

David Lee
David Lee

Reputation: 851

Try adding vertical-align:top to .forUplBtn and add this for the upload button:

.uplPhot a button{
 vertical-align:top;
}

Upvotes: 1

Related Questions