html5 表单required样式修改,HTML5表单required验证修改文字和样式

HTML5表单required验证修改文字和样式

input[type="text"]{border:2px solid #ccc;}

/*===包含required的表单===*/

/* 无效 */

input:required:invalid{

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRF/zAA/w0A/yQA/xAA/xQA/wMA/ykA/ycA/ygA/zEA/xEA/yYA/wEA/wAA/zMAAAAA54hoJQAAABF0Uk5T/wAlrZliAAAAUklEQVR42kxNWw7AIAzCuZdKLfc/7Wrjx0gaoCEASbYQDIn1BTqXvtznnO4UeHqYuGqwe4mwR+jWmmeM4PP7950vBnH3WPb3MUax3JIxEPwJMACNoAYZaJlHoAAAAABJRU5ErkJggg==);

background-position: right center;

background-repeat: no-repeat;

border-color:red;

box-shadow: none;

/* 兼容FF13以前版本 */

-moz-box-shadow: none;

}

/* 有效 */

input:required:valid{

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJQTFRFgNUtgdUtgNUsg9YxAAAATCM6bwAAAAZ0Uk5T//8As7+kvwAAAD9JREFUeNpEzTESwEAIAkAE/P+Xo4w3oXEtRHS3NzMRSvI6kujGI+nzsApFhnMBM1Hs47h3Ca8fQPr/v58AAwBrdwGYBVeZaAAAAABJRU5ErkJggg==);

background-position: right center;

background-repeat: no-repeat;

}

名字：

年龄：