Как оформить вкладку начальной загрузки? Мой 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>