machen eine Form aussehen wie Bootstrap-Taste

Question

Hallo Jungs so zur Zeit habe ich eine einfache Schaltfläche in Bootstrap haben, die wie folgt aussieht:

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

Ich versuchte dann zu meiner Form Tasten so aussehen zu lassen, aber es ist nicht richtig funktioniert Weiß jemand warum?

Mein Versuch so weit:

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

Wie Sie sehen können, die einreichen funktioniert gut war, sieht aus wie die Bootstrap-Taste, aber die oben, die die Datei „Datei nicht gefunden“ wählen, ist etc nicht funktioniert das für mich, ein Bild mit dem db hochladen, sondern wollen einfach nur die Tasten machen schön aussehen: 0

Dank

versucht, dies:

<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 unterscheidet Eingaben basierend auf ihrem Typ. Auf diese Weise kann ein [type='text'] anders als ein [type='submit'] stylen. In diesem Fall hat Bootstrap kein Styling für input[type='file'] in der Bibliothek eingebaut.

This answer hat in etwa gleiches Styling für das Element, das Sie selbst hinzufügen können.

Answer 2

Danach verbinden Beispiele 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>