css3 输入框提示

CSS3可以为输入框添加很多漂亮的提示效果，让表单更加好看和易用。

/* 输入框提示 */input::-webkit-input-placeholder {
    color: #999;
}
input:-moz-placeholder {
    color: #999;
}
input::-moz-placeholder {
    color: #999;
}
input:-ms-input-placeholder {
    color: #999;
}

以上代码表示输入框提示的颜色为灰色。

/* 输入框聚焦时提示 */input:focus::-webkit-input-placeholder {
    color: #666;
    font-size: 0.9em;
}
input:focus:-moz-placeholder {
    color: #666;
    font-size: 0.9em;
}
input:focus::-moz-placeholder {
    color: #666;
    font-size: 0.9em;
}
input:focus:-ms-input-placeholder {
    color: #666;
    font-size: 0.9em;
}

以上代码表示输入框聚焦时，提示的颜色改为深灰色，同时字体大小也会变小。

/* 输入框聚焦时，边框变色 */input:focus {
    outline: none;
    border-color: #666;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
    

以上代码表示输入框聚焦时，边框变为深灰色，同时有一个阴影效果，使得输入框更加立体。

CSS3的输入框提示效果不仅美观，而且提高了用户的交互体验，建议在页面中合理使用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！