Align Input file on Bootstrap input text

Question

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
}

David Lee · Accepted Answer · 2013-07-23 05:11:29Z

1

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

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

answered Jul 23, 2013 at 5:11

David Lee

8717 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 23, 2013 at 5:11

Praveen

56.7k35 gold badges138 silver badges170 bronze badges

1 Comment

Snippet Over a year ago

there is a space on top and left of the upload button..but thanks for the link

Collectives™ on Stack Overflow

Align Input file on Bootstrap input text

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related