JavaScript控制表单背景色和文字提示

最新推荐文章于 2024-05-28 11:44:38 发布

365天的坚持

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量113

点赞数

分类专栏：每日学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/liying_xiaozhan/article/details/129774647

版权

每日学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js控制表单背景色和文字提示</title>
    <style>
        #need{margin:20px auto 0;width:610px;}
        #need li{height:26px;width:600px;font:12px/26px Arial,Helvetica,sans-serif;background:FFD;border-bottom:1px dashed #e0e0e0;display:block;cursor:text;padding:7px 0px 10px!important;padding:5px 0px 5px 10px;}
        #need li:hover,#need li.hover {background:#FFE8E8;}
        #need input{line-height:14px;background:#FFF;height:14px;width:200px;border:1px solid #E0E0E0;
        vertical-align:middle;padding:6px;}
        #need label{padding-left:30px;}
        #need label.old_password{background-position:0 -277px;}
        #need label.new_password{background-position:0 -1576px;}
        #need label.rePassword{background-position:0 -1638px;}
        #need label.email{background-position:0 -429px;}
        #need dfn{display:none;}
        #need li:hover dfn,#need li.hover dfn {display:inline;margin-left:7px;color:#676767;}
       </style>
    <script type="text/javascript">
        function suckerfish(type,tag,parentId){
        if(window.attachEvent){
        window.attachEvent("onload",function(){
        var sfEls= (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
        type(sfELs);
        }}
        sfEls[i].onmouseout=function(){
        this.className=this.className.replace(new RegExp("hover\\b"),"");}}}
        suckerfish(hover,"li");
    </script>
</head>
<body>
<h1 align=center>密码修改页面</h1>
<ol id="need">
    <li><label class="old_password">原始密码:</label><input name="" type="password" /></li>
<li><label class="new_password">新的密码:</label><input name="" type="password" /><dfn>(密码长度6-20个字节，不想修改请留空)</dfn></li>
<li><label class="rePassword">重复密码：</label><input name="" type="password" /></li>
    <li><label class="enail">邮箱设置:</label><input name="" type="text" /><dfn>(承诺绝对不会给您发送任何垃圾邮件)</dfn></li>
</ol>
</body>
</html>