html - 使表单看起来像 Bootstrap 按钮

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>

如您所见，提交工作正常，看起来像 Bootstrap 按钮，但上面的那个选择文件“未找到文件”等不是，这对我来说是将图片上传到数据库，但只是想让按钮看起来漂亮 :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该元素具有大致相同的样式，您可以自己添加。