常用CSS代码块(持续更新)

1. input 框美化,设置input默认值,点击清空,离开恢复默认值

HTML:

<input type="text" value="&nbsp;&nbsp;姓名" class="input-beautify"  onfocus="if (value =='&nbsp;&nbsp;姓名'){value =''}" onblur="if (value ==''){value='&nbsp;&nbsp;姓名'}"><br />

<input type="text" value="&nbsp;&nbsp;邮箱" class="input-beautify" onfocus="if (value =='&nbsp;&nbsp;邮箱'){value =''}" onblur="if (value ==''){value='&nbsp;&nbsp;邮箱'}"><br />

<input type="text" value="&nbsp;&nbsp;电话" class="input-beautify" onfocus="if (value =='&nbsp;&nbsp;电话'){value =''}" onblur="if (value ==''){value='&nbsp;&nbsp;电话'}">

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 =='&nbsp;&nbsp;留言内容'){value =''}" onblur="if (value ==''){value='&nbsp;&nbsp;留言内容'}">&nbsp;&nbsp;留言内容</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;
}