如何在密码文本框中放置忘记密码链接

时间：2014-01-27 15:36:15

标签： javascript html css

如何使用jquery或任何其他技术在文本框中添加链接。 我有登录表单，用户名和密码都有忘记链接如何在文本框中添加链接。

类似于paypal登录页面：https://www.paypal.com/ca/webapps/mpp/home

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

将链接和输入放在另一个元素中。

将该元素设置为输入样式。

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

相关问题
最新问题