test

styleMV.css

@@ -699,18 +699,22 @@ footer {
 }
 
 #msform input[type="text"].imgsrc {
-  width: calc(100% - 7rem);
-  margin-right: 5px;
+  width: 80%;
 }
 
 .upload-btn {
   display: inline-block;
-  width: 6rem;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20%;
+  height: 100%;
   background-color: #75a7dd;
+  background-position: center;
+  background-size: cover;
   color: white;
   padding: 0.4rem 0.5rem;
   font-size: 0.9rem;
-  border-radius: 3px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   cursor: pointer;

test.html

@@ -26,6 +26,12 @@
       .input-sec {
         box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
         -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+        position: relative;
+      }
+      .upload-cta {
+        position: absolute;
+        left: 0;
+        top: 0;
       }
       .upload-cta.box-active {
         height: 80px;
@@ -390,8 +396,10 @@
             const nextEl = event.target.nextSibling;
             nextEl.innerHTML = '';
             nextEl.textContent = '上傳檔案';
-            nextEl.nextSibling.classList.add('box-active');
-            nextEl.nextSibling.style.backgroundImage = `url(http://${jsonData.msg})`;
+            nextEl.style.backgroundImage = `url(http://${jsonData.msg})`;
+            // nextEl.style.backgroundImage = `url(https://cdn2.ettoday.net/images/6017/d6017847.jpg)`;
+            // nextEl.nextSibling.classList.add('box-active');
+            // nextEl.nextSibling.style.backgroundImage = `url(http://${jsonData.msg})`;
             //console.log($(this).next());
             //$(this).next().html('上傳檔案');
             //$(this).next().text('上傳檔案');
@@ -589,7 +597,7 @@
           txtinput.classList.add('txtsrc', `txtsrc${i+1}`);
           txtinput.value = historyItem.text_content[i];
           txtinput.setAttribute('placeholder', `${i+1}`);
-          txtinput.style.width = "100%";
+          txtinput.style.width = "80%";
           input_sec.appendChild(txtinput);
 
           // img url input
@@ -615,15 +623,16 @@
           imguploadlabel.classList.add('upload-btn');
           imguploadlabel.textContent = '上傳圖片';
           imguploadlabel.setAttribute('set-lan', `html:upload_file`);
+          imguploadlabel.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
           img_box.appendChild(imguploadlabel);
           imgupload.addEventListener('change', prepareUpload);
 
           // preview image
-          var imgPreBox = document.createElement("div");
-          imgPreBox.classList.add('upload-cta', 'box-active');
-          imgPreBox.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
+          // var imgPreBox = document.createElement("div");
+          // imgPreBox.classList.add('upload-cta', 'box-active');
+          // imgPreBox.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
 
-          img_box.appendChild(imgPreBox);
+          //img_box.appendChild(imgPreBox);
           input_sec.appendChild(img_box);
           document.querySelector('.img-inputTest').append(input_sec);
         }
@@ -684,7 +693,7 @@
         var input_sec = document.createElement('div');
         var img_box = document.createElement('div');
 
-        input_sec.classList.add('input-sec', `input-sec${i}`, 'p-3', 'mb-3');
+        input_sec.classList.add('input-sec', `input-sec${i}`, 'p-3', 'mb-3' ,'text-end');
         img_box.classList.add('img-box');
 
         // text input
@@ -694,7 +703,7 @@
         txtinput.classList.add('txtsrc', `txtsrc${i}`);
         txtinput.value = "";
         txtinput.setAttribute('placeholder', `台詞`);
-        txtinput.style.width = "100%";
+        txtinput.style.width = "80%";
         input_sec.appendChild(txtinput);
 
         // img url input
@@ -724,9 +733,9 @@
         imgupload.addEventListener('change', prepareUpload);
 
         // preview image
-        var imgPreBox = document.createElement("div");
-        imgPreBox.classList.add('upload-cta');
-        img_box.appendChild(imgPreBox);
+        // var imgPreBox = document.createElement("div");
+        // imgPreBox.classList.add('upload-cta');
+        // img_box.appendChild(imgPreBox);
 
         input_sec.appendChild(img_box);
         document.querySelector('.img-inputTest').append(input_sec);