1. input 框美化,设置input默认值,点击清空,离开恢复默认值
HTML:
<input type="text" value=" 姓名" class="input-beautify" onfocus="if (value ==' 姓名'){value =''}" onblur="if (value ==''){value=' 姓名'}"><br />
<input type="text" value=" 邮箱" class="input-beautify" onfocus="if (value ==' 邮箱'){value =''}" onblur="if (value ==''){value=' 邮箱'}"><br />
<input type="text" value=" 电话" class="input-beautify" onfocus="if (value ==' 电话'){value =''}" onblur="if (value ==''){value=' 电话'}">
CSS:
.input-beautify {
margin-top:10px;
font-size: 1.5rem;
color: rgb(150, 150, 150);
line-height: 4.467;
border-width: 1px;
border-color: rgb(150, 150, 150);
border-style: solid;
opacity: 0.502;
background-color: #2c2c2c;
width: 315px;
height: 35px;
}
最终效果图:
2. textarea 框美化,设置textarea 默认值,点击清空,离开恢复默认值
HTML:
<textarea class="textarea-beautify" onfocus="if (value ==' 留言内容'){value =''}" onblur="if (value ==''){value=' 留言内容'}"> 留言内容</textarea>
CSS:
.textarea-beautify {
margin-top:10px;
font-size: 1.5rem;
color: rgb(150, 150, 150);
line-height: 4.467;
border-width: 1px;
border-color: rgb(150, 150, 150);
border-style: solid;
opacity: 0.502;
background-color: #2c2c2c;
width: 315px;
height: 130px;
}
最终效果图:
如果想去掉右下角三角标识,添加
resize:none;属性即可
CSS:
.textarea-beautify {
margin-top:10px;
font-size: 1.5rem;
color: rgb(150, 150, 150);
line-height: 4.467;
border-width: 1px;
border-color: rgb(150, 150, 150);
border-style: solid;
opacity: 0.502;
background-color: #2c2c2c;
width: 315px;
height: 130px;
/*去掉右下角三角标识*/
resize:none;
}