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

さて、このソリューションは機能していますが、バックグラウンドのコードを繰り返して、ソリューションがあまり DRY にならないようにします。その問題に対する他の良い解決策を想像できますか? 私が知らないベストプラクティスはありますか？

4

1 に答える 1

0

追加画像（ok.png）を背景画像ではなく枠画像として設定できます

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

ただし、古いブラウザのサポートについてはわかりません

于 2013-02-23T10:07:13.880 に答える