邊框文字效果的樣式
效果圖如下：
具體代碼如下：
<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。
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。