Question

大家好，所以目前我在bootstrap中有一个简单的按钮，如下所示：

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

然后我试图让我的表单按钮看起来像那样，但它不能正常工作，有人知道为什么吗？

到目前为止我的尝试：

<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>

正如你所看到的，提交工作正常，看起来像引导按钮但上面的那个，这是选择文件“找不到文件”等没有，这对我上传一张图片到数据库，但只是想让按钮看起来不错：0

谢谢

试过这个：

<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>

Answer 1

Bootstrap根据输入类型区分输入。这样，它就知道[type='text']与[type='submit']的格式不同。在这种情况下，Bootstrap没有为库中内置的input[type='file']设置样式。

This answer具有与您自己添加的元素大致相同的样式。

Answer 2

点击此链接示例https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3

{{(colors | async).backgroundHex)}}

使表单看起来像引导按钮

2 个答案: