2014-01-27 64 views
-3

如何使用jquery或任何其他技术在文本框内添加链接。 我有登录表单,在该用户名和密码忘记链接如何添加链接内的文本框。如何在密码文本框内放置忘记的密码链接

类似PayPal之类的登录页面:https://www.paypal.com/ca/webapps/mpp/home

+0

没有代码,它通常是很难猜测确切的问题是什么,并猜测答案通常是只有任何人可以做的事情。如果您提供以前尝试的一段代码,将会更容易理解您所遇到的具体问题。这段代码甚至可能是完全不起作用的代码,因为它仍然可以更好地了解你准备做什么。 – Joeytje50

+0

您不能在文本输入中放置链接。你指的是占位符文本吗? – j08691

+0

锚标签不能放在输入标签内。你究竟在努力完成什么,你尝试过什么? – David

回答

2

这是什么样子:

And the code (fiddle)

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style type="text/css"></style> 
     <style type="text/css"> 
      .div-0-mbi { border-color: rgb(102, 102, 102); color: rgb(102, 102, 102); font-family: Arial, Helvetica, sans-serif; font-size: 13px; height: 25px; margin-top: 9px; outline-color: rgb(102, 102, 102); text-align: right; text-decoration: none; width: 510px; -webkit-column-rule-color: rgb(102, 102, 102); -webkit-font-smoothing: antialiased; -webkit-perspective-origin-x: 255px; -webkit-perspective-origin-y: 12.5px; -webkit-text-emphasis-color: rgb(102, 102, 102); -webkit-text-fill-color: rgb(102, 102, 102); -webkit-text-stroke-color: rgb(102, 102, 102); -webkit-transform-origin: 255px 12.5px; } 
      .div-1-mbi { float: left; height: 26px; margin-right: 8px; position: relative; width: 180px; -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-transform-origin: 90px 13px; } 
      .label-2-mbi { border-color: rgb(145, 145, 145); color: rgb(145, 145, 145); cursor: text; display: block; font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 15px; left: 12px; outline-color: rgb(145, 145, 145); position: absolute; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.701961) 0px 1px 0px; top: 6px; width: 29px; z-index: 2; -webkit-column-rule-color: rgb(145, 145, 145); -webkit-perspective-origin-x: 14.5px; -webkit-perspective-origin-y: 7.5px; -webkit-text-emphasis-color: rgb(145, 145, 145); -webkit-text-fill-color: rgb(145, 145, 145); -webkit-text-stroke-color: rgb(145, 145, 145); -webkit-transform-origin: 14.5px 7.5px; } 
      .input-3-mbi { background-clip: padding-box; background-color: rgb(222, 222, 222); border: 1px solid rgb(87, 169, 217); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(58, 144, 194, 0.6) 0px 0px 5px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; box-sizing: border-box; color: rgb(51, 51, 51); font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 26px; margin: 0px; outline-color: rgb(51, 51, 51); padding: 0px 55px 0px 10px; text-decoration: none; text-shadow: rgb(214, 214, 214) 0px 1px 0px; text-overflow: ellipsis; width: 180px; -webkit-appearance: none; -webkit-background-clip: padding-box; -webkit-box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(58, 144, 194, 0.6) 0px 0px 5px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 90px 13px; -webkit-transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; } 
      .span-4-mbi { } 
      .a-5-mbi { background-color: rgb(118, 118, 118); border-color: rgb(255, 255, 255); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; box-sizing: border-box; color: rgb(255, 255, 255); display: block; font-size: 10px; font-weight: 600; height: 18px; line-height: 18px; outline-color: rgb(255, 255, 255); padding-left: 6px; padding-right: 6px; position: absolute; right: 4px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px; top: 4px; width: 45px; -webkit-column-rule-color: rgb(255, 255, 255); -webkit-perspective-origin-x: 22.5px; -webkit-perspective-origin-y: 9px; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(255, 255, 255); -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-stroke-color: rgb(255, 255, 255); -webkit-transform-origin: 22.5px 9px; } 
      .div-6-mbi { display: none; height: auto; width: auto; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -webkit-transform-origin: 50% 50%; } 
      .p-9-mbi { line-height: 19px; margin-bottom: 8px; margin-top: 8px; } 
      .a-12-mbi { background-image: -webkit-linear-gradient(bottom, rgb(191, 191, 191) 0%, rgb(191, 191, 191) 20%, rgb(224, 224, 224) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; color: rgb(51, 51, 51); cursor: pointer; display: inline-block; font-size: 11px; font-weight: bold; height: 15.998481750488281px; line-height: 15.998481750488281px; margin-left: 2px; margin-right: 4px; min-width: 44px; outline-color: rgb(51, 51, 51); padding: 4px 8px; position: relative; text-align: center; text-decoration: none; text-shadow: rgb(224, 224, 224) 0px 1px 0px; -webkit-box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); } 
      .label-14-mbi { border-color: rgb(62, 62, 62); color: rgb(62, 62, 62); cursor: text; display: block; font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif; font-size: 11px; height: 15px; left: 12px; outline-color: rgb(62, 62, 62); position: absolute; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.701961) 0px 1px 0px; top: 6px; width: 51px; z-index: 2; -webkit-column-rule-color: rgb(62, 62, 62); -webkit-perspective-origin-x: 25.5px; -webkit-perspective-origin-y: 7.5px; -webkit-text-emphasis-color: rgb(62, 62, 62); -webkit-text-fill-color: rgb(62, 62, 62); -webkit-text-stroke-color: rgb(62, 62, 62); -webkit-transform-origin: 25.5px 7.5px; } 
      .input-15-mbi { background-clip: padding-box; background-color: rgb(204, 204, 204); border: 1px solid rgb(92, 92, 94); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; box-sizing: border-box; color: rgb(51, 51, 51); font-family: verdana, arial, sans-serif; font-size: 11px; height: 26px; margin: 0px; outline-color: rgb(51, 51, 51); padding: 0px 55px 0px 10px; text-decoration: none; text-shadow: rgb(214, 214, 214) 0px 1px 0px; text-overflow: ellipsis; width: 180px; -webkit-appearance: none; -webkit-background-clip: padding-box; -webkit-box-shadow: rgba(255, 255, 255, 0.14902) 0px 1px 0px 0px, rgba(0, 0, 0, 0.2) 0px 2px 2px 0px inset; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-perspective-origin-x: 90px; -webkit-perspective-origin-y: 13px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 90px 13px; -webkit-transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; transition: border 0.2s ease-in-out 0s, background-color 0.2s ease-in-out 0s; } 
      .span-18-mbi { clip: rect(1px 1px 1px 1px); display: block; height: 1px; overflow: hidden; position: absolute; width: 1px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 0.5px; -webkit-transform-origin: 0.5px 0.5px; } 
      .p-21-mbi { height: 57px; line-height: 19px; margin-bottom: 8px; margin-top: 8px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 28.5px; -webkit-transform-origin: 0.5px 28.5px; } 
      .p-22-mbi { height: 209px; line-height: 19px; margin-bottom: 8px; margin-top: 8px; -webkit-perspective-origin-x: 0.5px; -webkit-perspective-origin-y: 104.5px; -webkit-transform-origin: 0.5px 104.5px; } 
      .input-31-mbi { background-color: rgba(0, 0, 0, 0); background-image: -webkit-linear-gradient(bottom, rgb(191, 191, 191) 0%, rgb(191, 191, 191) 20%, rgb(224, 224, 224) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; box-sizing: content-box; color: rgb(51, 51, 51); cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; height: 15.984375px; line-height: 15.998481750488281px; margin: 0px 4px 0px 2px; min-width: 44px; outline-color: rgb(51, 51, 51); padding: 4px 8px; position: relative; text-decoration: none; text-shadow: rgb(224, 224, 224) 0px 1px 0px; width: 44px; -webkit-appearance: none; -webkit-box-shadow: rgb(236, 236, 236) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px; -webkit-column-rule-color: rgb(51, 51, 51); -webkit-font-smoothing: antialiased; -webkit-perspective-origin-x: 31px; -webkit-perspective-origin-y: 12.984375px; -webkit-text-emphasis-color: rgb(51, 51, 51); -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-stroke-color: rgb(51, 51, 51); -webkit-transform-origin: 31px 12.984375px; } 
      .a-32-mbi { background-image: -webkit-linear-gradient(bottom, rgb(0, 121, 193) 0%, rgb(0, 121, 193) 20%, rgb(0, 161, 255) 100%); border-color: rgb(86, 86, 86) rgb(77, 77, 77) rgb(62, 62, 62); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px, rgb(77, 190, 255) 0px 1px 0px 0px inset; color: rgb(255, 255, 255); cursor: pointer; display: inline-block; font-size: 11px; font-weight: bold; height: 15.984375px; line-height: 15.998481750488281px; min-width: 44px; outline-color: rgb(255, 255, 255); padding: 4px 8px; text-align: center; text-decoration: none; text-shadow: rgb(0, 105, 44) 0px -1px 0px; width: 44px; -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px, rgb(77, 190, 255) 0px 1px 0px 0px inset; -webkit-column-rule-color: rgb(255, 255, 255); -webkit-perspective-origin-x: 31px; -webkit-perspective-origin-y: 12.984375px; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(255, 255, 255); -webkit-text-fill-color: rgb(255, 255, 255); -webkit-text-stroke-color: rgb(255, 255, 255); -webkit-transform-origin: 31px 12.984375px; } 
     </style> 
    </head> 
    <body> 
     <div class="div-0-mbi"> 
      <div id="login_emaildiv" class="div-1-mbi"> 
       <label for="login_email" class="label-2-mbi">Email</label> 
       <input type="text" id="login_email" name="login_email" value="" class="input-3-mbi"> 
       <span class="span-4-mbi"> 
        <a aria-expanded="false" data-shorttext="?" data-longtext="forgot?" aria-controls="passwordRecovery1Desc" id="passwordRecovery1" href="#" role="button" class="a-5-mbi">forgot?</a> 
        <div aria-hidden="true" aria-labelledby="passwordRecovery1" id="passwordRecovery1Desc" class="div-6-mbi"> 
         <div class="span-4-mbi"><span id="calloutCloseBtn" class="span-4-mbi">Close</span></div> 
         <p class="p-9-mbi">Forgot your email address?</p> 
         <p class="p-9-mbi">Enter up to 3 of your email addresses and we'll help you find your account.</p> 
         <span class="span-4-mbi"> 
         <a href="#" class="a-12-mbi">Get started</a> 
         </span> 
        </div> 
       </span> 
      </div> 
      <div id="login_passworddiv" class="div-1-mbi"> 
       <label for="login_password" class="label-14-mbi">Password</label> 
       <input type="password" id="login_password" name="login_password" autocomplete="off" class="input-15-mbi"> 
       <span class="span-4-mbi"> 
        <a aria-expanded="false" data-shorttext="?" data-longtext="forgot?" id="passwordRecovery2" aria-controls="passwordRecovery2Desc" href="#" role="button" class="a-5-mbi"> 
         forgot? 
         <span class="span-18-mbi"> 
          <div class="span-4-mbi"> 
           <span id="calloutCloseBtn" class="span-4-mbi">Close</span> 
          </div> 
          <p class="p-21-mbi">Forgot your password?</p> 
          <p class="p-22-mbi">Enter your email address and we'll help you reset your password.</p> 
          <span class="span-4-mbi"> 
          Get started 
          </span> 
         </span> 
        </a> 
        <div aria-hidden="true" aria-labelledby="passwordRecovery2" id="passwordRecovery2Desc" class="div-6-mbi"> 
         <div class="span-4-mbi"> 
          <span id="calloutCloseBtn" class="span-4-mbi">Close</span> 
         </div> 
         <p class="p-9-mbi">Forgot your password?</p> 
         <p class="p-9-mbi">Enter your email address and we'll help you reset your password.</p> 
         <span class="span-4-mbi"> 
         <a href="#" class="a-12-mbi">Get started</a> 
         </span> 
        </div> 
       </span> 
      </div> 
      <input type="submit" name="submit.x" value="Log In" class="input-31-mbi">      
      <a href="#" name="SignUp_header" class="a-32-mbi">Sign Up</a> 
     </div> 
    </body> 
</html> 
0

放在其他元素的链接,并输入。

样式该元素看起来像一个输入。

将实际输入设置为不可见(即没有边框或背景)。