html - 多重背景 & :valid - shortest solution/DRY solution?

Question

我有一个带有一些输入字段的表单。这些输入字段具有指定的背景渐变，如下所示:

input {
    background: #00b7ea;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjdlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDllYzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #00b7ea 0%, #009ec3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
    background: -webkit-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
    background: -o-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
    background: -ms-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
    background: linear-gradient(to bottom,  #00b7ea 0%,#009ec3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}

现在，当字段验证为 :valid 时，我想添加一个符号，表示一切正常。通常我会尝试使用伪元素 :before 和 :after ，但在这种情况下不会。 :before 和 :after 在元素内部呈现，因为输入字段不允许包含任何其他元素，所以我找不到正确定位它们的方法.
所以我必须将指示器显示为背景图像，这会导致该代码:

input {
    background: #00b7ea;
    background: url(../images/ok.png), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjdlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDllYzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: url(../images/ok.png), -moz-linear-gradient(top,  #00b7ea 0%, #009ec3 100%);
    background: url(../images/ok.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
    background: url(../images/ok.png), -webkit-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
    background: url(../images/ok.png), -o-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
    background: url(../images/ok.png), -ms-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
    background: linear-gradient(to bottom,  #00b7ea 0%,#009ec3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}

现在，虽然这个解决方案有效，但我重复了后台代码，这样解决方案就不是很干了。你能想出任何其他好的解决方案来解决这个问题吗？有什么我不知道的最佳做法吗？

Answer 1

您可以将附加图像 (on.png) 设置为边框图像而非背景图像

input:valid {
    border-image: url(../images/ok.png);
}

但不确定是否支持旧版浏览器