如何设置引导选项卡的样式？我的html不能正确显示

Question

我有一个标签，我想在其中显示文件上传代码。我贴了我的   码   在标签中，但只显示了一个无样式的小按钮（有效），但是   似乎根本没有样式/破坏了现有样式    样式

我正在我想要实现文件上传的cms上工作。

感谢您的帮助，对任何错误的措词表示歉意

我尝试编辑标签并更改了自己的代码，但没有成功。

 <div id="foto_tabs" class="tabs">
    <h2>Multi-File upload. </h2>


 <form class="tab-content" id="wtFrm" action="/uploadmultiple"  
 enctype="multipart/form-data" method="POST">

Select images: <input type="file" name="myFiles" multiple>
<input id="wtSubm" type="submit" value="Upload your files"/>
 </form>
 <progress id="wtPrgrss_bar" class="hide" value="0" max="100"> 
    </progress>
 <span id="wtPrgrss" class="txt_s_xs"></span>
              </div>





 <style>
        body{
            background: none;
        }
        progress{
            display:none;
        -webkit-appearance: progress-bar;
        appearance: progress-bar;
            width:240px;
            height:24px;
        }
        progress[value]::-webkit-progress-bar {
           background-color: #eee;
           border-radius: 2px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
        }
        progress[value]::-webkit-progress-value {
         background-color:#81B523;


              border-radius: 2px; 
           }
    </style>









    <script>
             function getQueryVariable(variable) {
              var query = window.location.search.substring(1);
             var vars = query.split("&");
             for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
              return pair[1];
             }
          } 
        }

        $(document).ready(function() {
            $('#wtFrm').submit(function(e){
                e.preventDefault();
                var formData = new FormData(this);
                    $('#wtPrgrss_bar').show();
                    $('#wtFrm').hide();
                    $('#wtPrgrss').html('Bezig met  
                                versturen . . .');
                $.ajax({
                    xhr: function() {
                        var xhr = new 
                         XMLHttpRequest();

             xhr.upload.addEventListener("progress", function(evt) {
                            if 
                 (evt.lengthComputable) {
                                var 
               percentComplete = (evt.loaded / evt.total)*100;

                     $('#wtPrgrss_bar').val(percentComplete);
                                i 
               if(percentComplete >= 100){

                  $('#wtPrgrss_bar').hide();

                $('#wtPrgrss').html('<h2>Upload Compleet : ) </h2>');
                                }
                            }
                        }, false);


            xhr.addEventListener("progress", function(evt) {
                            if 
                  (evt.lengthComputable) {
                                var 
            percentComplete = evt.loaded / evt.total;
                                //Do 
                   something with download progress
                            }
                        }, false);

                        return xhr;
                    },
                    url: '/uploadmultiple',
                    method: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    timeout: 0,
                    success: function(data) {
                        $('#wtFrm').show();

                   $('#wtPrgrss').html(data.message);

                  if(data.link_show===true){

                     $('#wtFrm').remove();
                        }

                    if(data.form_show===false){

                  $('#wtFrm').remove();
                        }
                    },
                    error: function(xhr, status, 
            error) {
                        console.log(status + 
                '; ' + error);
                    }
                });

            });
            return false;
           });
             </script>