2

我有一个带有一些输入字段的表单。这些输入字段有一个渐变作为背景分配，如下所示：

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 );
}

现在，尽管此解决方案有效，但我重复了背景代码，以便解决方案不是很干燥。你能想象出任何其他好的解决方案来解决这个问题吗？有什么我不知道的最佳实践吗？

4

1 回答 1

0

您可以将附加图像（ok.png）设置为不是背景图像，而是设置为边框图像

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

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

于 2013-02-23T10:07:13.880 回答