如何更改 Div 的 position 并在单击时将其返回到以前的 position？

Question

大家好，我的程序中有两个问题。

第一个问题是：

我在其中有一个input ，其中有一个包含“标题”一词的div 。 我想要的是当点击input时， div将 go 向上。 我设法做到了这一点，但如果我点击外面并且input中没有任何内容，它不会 go 回到它之前的 position。 所以要清楚，如果input框中没有写任何内容，带有标题字的div应该 go 回到之前的 position 并且如果input框中有任何内容，它会保持在顶部。

我想要实现的目标与本页中的类似 <https://www.blogger.com/onboarding?pli=1#create

第二个问题：如果我在input框上写并单击下一步，它将使用 NEXT 链接（下一步按钮），它将起作用，go 到 NEXT 页

但如果我没有在input框中写任何东西，它会给出一条错误消息，并且不会 go 下一个页面，我实现了这一点，但如果我尝试在input框上写并单击，则问题出在错误消息之后NEXT 按钮不会 go 到 NEXT 页。

 function empty() { var x; var y; x = document.getElementById("counter-input").value; if (x == "") { y=document.getElementById("re").style.visibility="visible"; document.getElementById("nxa").removeAttribute('href'); } else { y=document.getElementById("re").style.visibility="hidden"; document.getElementById("nxa").getAttribute("href"); } } var test = document.getElementById("test"); document.getElementById("counter-input").onclick = function() { test.style="font-size:12px; color: #2322EE;transform: translateY(-29px);visibility: visible;important;"; };

 .sub2 {-webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; padding: 16px; min-height: 200px; }.ss {-webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; padding: 0 16px; display: flex; justify-content: center; }.ss2 { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: inline-block; outline: none; width: 200px; padding-bottom: 4px; }.ss3 {-webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; position: relative; top: 14px; }.ss4 { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; }.cc { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); text-size-adjust: 100%; text-align: start; pointer-events: none; opacity: .3; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; min-height: 16px; padding-top: 24px; }.cc2{ -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; min-height: 16px; padding-top: 8px; color: #ff5722; display: none; }.Xb { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; -webkit-box-flex: 1; flex-grow: 1; flex-shrink: 1; min-width: 0%; position: relative; }.whs { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; direction: ltr; unicode-bidi: isolate; -webkit-tap-highlight-color: transparent; -webkit-box-flex: 1; flex-grow: 1; flex-shrink: 1; background-color: transparent; border: none; display: block; font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; height: 24px; line-height: 24px; margin: 0; min-width: 0%; outline: none; padding: 0; z-index: 0; }.Ax { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; transform-origin: bottom left; transition: all.3s cubic-bezier(0.4,0,0.2,1); transition-property: color,bottom,transform; color: rgba(0,0,0,0.38); font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; font-size: 16px; pointer-events: none; position: absolute; bottom: 3px; left: 0; width: 100%; }.i9 { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; bottom: -2px; left: 0; margin: 0; padding: 0; position: absolute; width: 100%; background-color: #ff5722; height: 1px; }.Oab { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; transform: scaleX(0); bottom: -2px; height: 2px; left: 0; margin: 0; padding: 0; position: absolute; width: 100%; background-color: #ff5722; }.dv4 {-webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; align-items: center; display: flex; justify-content: space-between; width: 100%; }.dsk {-webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; transition: background.2s.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: #ff5722; line-height: 20px; min-width: 88px; }.ski {-webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; color: #ff5722; line-height: 20px; -webkit-tap-highlight-color: transparent; display: inline-block; margin: 8px; }.dv6 { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; justify-content: center; } a {text-decoration: none;}.skip,.cancel,.next{color: #ff5722;}.sk,.cl,.nx { -webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; color: #ff5722; line-height: 20px; -webkit-tap-highlight-color: transparent; position: relative; }.cldiv {-webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; transition: background.2s.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: rgba(0,0,0,0.87); font-weight: 500; line-height: 20px; min-width: 88px; }.nxdiv {-webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; transition: background.2s.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: #ff5722; line-height: 20px; min-width: 88px; }.req {visibility: hidden; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; min-height: 16px; padding-top: 8px; color: #d50000; }

 <:doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="sub2"> <div class="ss" > <div class="ss2"> <div class="ss3"> <div class="Xb"> <input type="text" class="whs" tabindex="0" id="counter-input" maxlength="100" required> <div class="Ax" id="test">Title</div> </div> <div class="i9"></div> <div class="Oab" ></div> </div> <div class="ss4"> <div class="cc"><span class="req" id="re">Required feild must not be blank</span></div> <div class="cc2"></div> </div> </div> </div> <div class="dv4"> <div class="dsk"> <a href="" class="skip"><span class="sk"><span class="ski"><b>Prev</b></span></span></a></div> <div class="dv6"> <div class="cldiv"> <a href="" class="cancel" style="align. left"><span class="cl"><span class="ski"><b>CANCEL</b></span></span></a></div> <div class="nxdiv" ><a href="Next:html" onClick="empty()" class="next" style="align: right" id="nxa"><span class="nx"><span class="ski"><b>NEXT</b></span></span></a></div> </div> </div> </div> </body> </html>

Answer 1

首要问题：

您需要一个 class 来附加到“标题”div，并根据输入是否被单击和模糊来切换它。 我已将您的“标题”div 内联样式转换为 class。

对于第二个问题：

用户在输入中输入值后，您需要再次附加 href 属性。

 function empty() { var counterInputValue = document.getElementById('counter-input').value; // Input value. var nextButton = document.getElementById('nxa'); // Next button. var errorMessage = document.getElementById('re'); // Error message. if (counterInputValue === '') { // When input is empty. errorMessage.style.visibility = 'visible'; // Display the error. if (nextButton.hasAttribute('href')) { // Remove the href attribute if it has it. nextButton.removeAttribute('href'); } } else { // When error message is shown and input value present, we need to add the href back again. errorMessage.style.visibility = 'hidden'; if (.nextButton.hasAttribute('href')) { nextButton,setAttribute('href'. 'Next;html'). } } } var test = document;getElementById('test'). var input = document;getElementById('counter-input'). input.onclick = function () { if(.test.classList.contains('test-div-on-click')) { test;classList;add('test-div-on-click'). } }. input.onblur = function () { if (input.value === '') { if(test.classList.contains('test-div-on-click')) { test;classList.remove('test-div-on-click'); } } }

 .sub2 { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; padding: 16px; min-height: 200px; }.ss { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; padding: 0 16px; display: flex; justify-content: center; }.ss2 { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: inline-block; outline: none; width: 200px; padding-bottom: 4px; }.ss3 { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; position: relative; top: 14px; }.ss4 { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; }.cc { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); text-size-adjust: 100%; text-align: start; pointer-events: none; opacity: 0.3; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; min-height: 16px; padding-top: 24px; }.cc2 { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; min-height: 16px; padding-top: 8px; color: #ff5722; display: none; }.Xb { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; -webkit-box-flex: 1; flex-grow: 1; flex-shrink: 1; min-width: 0%; position: relative; }.whs { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; direction: ltr; unicode-bidi: isolate; -webkit-tap-highlight-color: transparent; -webkit-box-flex: 1; flex-grow: 1; flex-shrink: 1; background-color: transparent; border: none; display: block; font: 400 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; height: 24px; line-height: 24px; margin: 0; min-width: 0%; outline: none; padding: 0; z-index: 0; }.Ax { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; transform-origin: bottom left; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition-property: color, bottom, transform; color: rgba(0, 0, 0, 0.38); font: 400 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; font-size: 16px; pointer-events: none; position: absolute; bottom: 3px; left: 0; width: 100%; }.i9 { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; bottom: -2px; left: 0; margin: 0; padding: 0; position: absolute; width: 100%; background-color: #ff5722; height: 1px; }.Oab { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; transform: scaleX(0); bottom: -2px; height: 2px; left: 0; margin: 0; padding: 0; position: absolute; width: 100%; background-color: #ff5722; }.dv4 { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; align-items: center; display: flex; justify-content: space-between; width: 100%; }.dsk { -webkit-font-smoothing: antialiased; font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; transition: background 0.2s 0.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: #ff5722; line-height: 20px; min-width: 88px; }.ski { -webkit-font-smoothing: antialiased; font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; color: #ff5722; line-height: 20px; -webkit-tap-highlight-color: transparent; display: inline-block; margin: 8px; }.dv6 { -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.87); font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; justify-content: center; } a { text-decoration: none; }.skip, .cancel, .next { color: #ff5722; }.sk, .cl, .nx { -webkit-font-smoothing: antialiased; font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; color: #ff5722; line-height: 20px; -webkit-tap-highlight-color: transparent; position: relative; }.cldiv { -webkit-font-smoothing: antialiased; font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; transition: background 0.2s 0.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: rgba(0, 0, 0, 0.87); font-weight: 500; line-height: 20px; min-width: 88px; }.nxdiv { -webkit-font-smoothing: antialiased; font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; text-size-adjust: 100%; transition: background 0.2s 0.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: #ff5722; line-height: 20px; min-width: 88px; }.req { visibility: hidden; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto, RobotoDraft, Helvetica, Arial, sans-serif; min-height: 16px; padding-top: 8px; color: #d50000; }.test-div-on-click { font-size: 12px; color: #2322EE; transform: translateY(-29px); visibility: visible;important; }

 <:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Untitled Document</title> </head> <body> <div class="sub2"> <div class="ss"> <div class="ss2"> <div class="ss3"> <div class="Xb"> <input type="text" class="whs" tabindex="0" id="counter-input" maxlength="100" required /> <div class="Ax" id="test">Title</div> </div> <div class="i9"></div> <div class="Oab"></div> </div> <div class="ss4"> <div class="cc"> <span class="req" id="re">Required feild must not be blank</span> </div> <div class="cc2"></div> </div> </div> </div> <div class="dv4"> <div class="dsk"> <a href="" class="skip" ><span class="sk" ><span class="ski"><b>Prev</b></span></span ></a > </div> <div class="dv6"> <div class="cldiv"> <a href="" class="cancel" style="align. left" ><span class="cl" ><span class="ski"><b>CANCEL</b></span></span ></a > </div> <div class="nxdiv"> <a href="Next:html" onClick="empty()" class="next" style="align: right" id="nxa" ><span class="nx" ><span class="ski"><b>NEXT</b></span></span ></a > </div> </div> </div> </div> </body> </html>

Answer 2

您需要在单击输入时显示 div，或者当输入失去焦点（模糊）时，当它获得焦点并返回其正常 position 时。 此外，当输入不为空时，您需要隐藏该 div。

通过添加/删除 CSS 类而不是附加内联 styles，您可以更好、更轻松地控制正在发生的事情：

 var test = document.getElementById("test"); var counter = document.getElementById("counter-input"); function empty() { var x; var y; x = document.getElementById("counter-input").value; if (x == "") { y=document.getElementById("re").style.visibility="visible"; document.getElementById("nxa").removeAttribute('href'); // Empty input, show div test.classList.remove('not-show'); // Does div must be above? if not, comment next line test.classList.add('show-up'); } else { y=document.getElementById("re").style.visibility="hidden"; document.getElementById("nxa").getAttribute("href"); // Ok, input has a value, hide the div test.classList.remove('show-up'); test.classList.add('not-show'); } } // Show the div, this function will be attached to 2 events function moveTitle() { test.classList.remove('not-show'); test.classList.add('show-up'); } // Show div on input click or when it gets focused counter.addEventListener('click', moveTitle); counter.addEventListener('focus', moveTitle); // Test contents when input lose focus counter.addEventListener('blur', empty);

 .sub2 {-webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; padding: 16px; min-height: 200px; }.ss {-webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; padding: 0 16px; display: flex; justify-content: center; }.ss2 { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: inline-block; outline: none; width: 200px; padding-bottom: 4px; }.ss3 {-webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; position: relative; top: 14px; }.ss4 { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; }.cc { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); text-size-adjust: 100%; text-align: start; pointer-events: none; opacity: .3; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; min-height: 16px; padding-top: 24px; }.cc2{ -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; min-height: 16px; padding-top: 8px; color: #ff5722; display: none; }.Xb { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; -webkit-box-flex: 1; flex-grow: 1; flex-shrink: 1; min-width: 0%; position: relative; }.whs { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; direction: ltr; unicode-bidi: isolate; -webkit-tap-highlight-color: transparent; -webkit-box-flex: 1; flex-grow: 1; flex-shrink: 1; background-color: transparent; border: none; display: block; font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; height: 24px; line-height: 24px; margin: 0; min-width: 0%; outline: none; padding: 0; z-index: 0; }.Ax { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; transform-origin: bottom left; transition: all.3s cubic-bezier(0.4,0,0.2,1); transition-property: color,bottom,transform; color: rgba(0,0,0,0.38); font: 400 16px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; font-size: 16px; pointer-events: none; position: absolute; bottom: 3px; left: 0; width: 100%; }.i9 { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; bottom: -2px; left: 0; margin: 0; padding: 0; position: absolute; width: 100%; background-color: #ff5722; height: 1px; }.Oab { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; transform: scaleX(0); bottom: -2px; height: 2px; left: 0; margin: 0; padding: 0; position: absolute; width: 100%; background-color: #ff5722; }.dv4 {-webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; align-items: center; display: flex; justify-content: space-between; width: 100%; }.dsk {-webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; transition: background.2s.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: #ff5722; line-height: 20px; min-width: 88px; }.ski {-webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; color: #ff5722; line-height: 20px; -webkit-tap-highlight-color: transparent; display: inline-block; margin: 8px; }.dv6 { -webkit-font-smoothing: antialiased; color: rgba(0,0,0,0.87); font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; display: flex; justify-content: center; } a {text-decoration: none;}.skip,.cancel,.next{color: #ff5722;}.sk,.cl,.nx { -webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; text-transform: uppercase; color: #ff5722; line-height: 20px; -webkit-tap-highlight-color: transparent; position: relative; }.cldiv {-webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; transition: background.2s.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: rgba(0,0,0,0.87); font-weight: 500; line-height: 20px; min-width: 88px; }.nxdiv {-webkit-font-smoothing: antialiased; font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif; text-size-adjust: 100%; transition: background.2s.1s; border: 0; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; outline: none; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; z-index: 0; color: #ff5722; line-height: 20px; min-width: 88px; }.req {visibility: hidden; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; text-align: start; -webkit-tap-highlight-color: transparent; flex: 1 1 auto; font: 400 12px Roboto,RobotoDraft,Helvetica,Arial,sans-serif; min-height: 16px; padding-top: 8px; color: #d50000; }.show-up { font-size:12px; color: #2322EE; transform: translateY(-29px); visibility: visible;important. }:not-show { visibility; hidden; }

 <:doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div class="sub2"> <div class="ss" > <div class="ss2"> <div class="ss3"> <div class="Xb"> <input type="text" class="whs" tabindex="0" id="counter-input" maxlength="100" required> <div class="Ax" id="test">Title</div> </div> <div class="i9"></div> <div class="Oab" ></div> </div> <div class="ss4"> <div class="cc"><span class="req" id="re">Required feild must not be blank</span></div> <div class="cc2"></div> </div> </div> </div> <div class="dv4"> <div class="dsk"> <a href="" class="skip"><span class="sk"><span class="ski"><b>Prev</b></span></span></a></div> <div class="dv6"> <div class="cldiv"> <a href="" class="cancel" style="align. left"><span class="cl"><span class="ski"><b>CANCEL</b></span></span></a></div> <div class="nxdiv" ><a href="Next:html" onClick="empty()" class="next" style="align: right" id="nxa"><span class="nx"><span class="ski"><b>NEXT</b></span></span></a></div> </div> </div> </div> </body> </html>