邊框文字效果的樣式


效果圖如下:


具體代碼如下:

<script src="jquery-1.11.3.js" type="text/javascript"></script>
    <script>
        $(function () {
            //名稱和密碼
            $("input").focus(function () {
                var name = $(this).val();
                if (name == this.defaultValue) {
                    $(this).val("");
                   
                }
                $(this).css("background-color", "#f0f0f0");


            });
            $("input").blur(function () {
                var name = $(this).val();
                if (name == "") {
                    $(this).val(this.defaultValue);
                    
                }
                $(this).css("background-color", "#ffffff");
                
            });
           
            //詳細信息
            $(function () {
                $(".t1").val("詳細信息");
            });
            $(".t1").focus(function () {
                var name = $(this).val();
                if (name == "詳細信息") {
                    $(this).val("");
                }
                $(this).css("background-color", "#f0f0f0");
            });
            $(".t1").blur(function () {
                var name = $(this).val();
                if (name == "") {
                    $(this).val("詳細信息");
                }
                $(this).css("background-color", "#ffffff");
            });


        });
     
    </script>
</head>
<body>
    <fieldset  style="width:400px;border:1px dashed;">      //此標簽是邊框標簽
        <legend>個人基本信息</legend>      //邊框設置標簽的內容
         <div>
        <label>名稱:</label><input class="name" type="text" value="名稱"/></br >
        <label>密碼:</label><input class="password" type="password" value="密碼" /></br >
        <label>詳細信息:</label><textarea class="t1" style="width:12em;" ></textarea>
    </div>
    </fieldset>
   
</body>


第二:也可以用定位實現,position。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: