Making a form look like bootstrap button

Question

Hi guys so currently i have a simple button in bootstrap which looks like :

class="btn btn-success btn-block btnrec"

I then was trying to make my form buttons look like that, however its not working correctly , anyone know why?

My attempt so far:

<form action="" method="post" enctype="multipart/form-data">
    <input class="btn btn-success btn-block btnrec" type="file" name="file">
    <input class="btn btn-success btn-block btnrec"type="submit" name="submit"> 
</form>

As you can see, the submit was works fine, looks like the bootstrap button but the one above, which is the choose file "File not found" etc does not, this for me uploading a pic to the db, but just want to make the buttons look nice :0

Thanks

Tried this:

<form action="" method="post" enctype="multipart/form-data">
    <a class='btn btn-primary' href='javascript:;'>
        Choose File...
        <input type="file" name ="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
    </a>
    <input class="btn btn-success btn-block btnrec"type="submit" name="submit"> 
</form>

score 0 · Answer 1 · edited May 23 '17 at 12:26

0

Bootstrap distinguishes inputs based on their type. That way it knows to style a [type='text'] differently from a [type='submit']. In this case, Bootstrap doesn't have styling for input[type='file'] built in to the library.

This answer has roughly equivalent styling for that element that you can add yourself.

edited May 23 '17 at 12:26

Community

1
1

answered Mar 27 '16 at 00:55

Jack Guy

8,346
8
55
86

Ah ok so basically there is not a real way of doing it :0 , i might just make the submit button then like the class and leave the top one as normal – RonTheOld Mar 27 '16 at 00:59

score -1 · Answer 2 · answered May 17 '17 at 00:44

Following this links examples https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3

<!-- support IE8 -->

 <form action="" method="post" enctype="multipart/form-data">
        <span class="btn btn-success btn-block btnrec btn-file">
            Upload <input type="file" name="file">
        </span>
        <input class="btn btn-success btn-block btnrec" type="submit" name="submit">
 </form>

<!-- don't care about IE8 -->
 <form action="" method="post" enctype="multipart/form-data">
        <label class="btn btn-success btn-block btnrec btn-file">
            Upload <input style="display: none;" type="file" name="file">
        </label>
        <input class="btn btn-success btn-block btnrec" type="submit" name="submit">
 </form>

    <style>
        .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: inherit;
            display: block;
        }
    </style>

Making a form look like bootstrap button

2 Answers2