LiveValidation -是否将验证消息更改为图片？

Question

LiveValidation是用于验证数据的JavaScript库。当用户输入信息时，我使用它来验证表单。目前，出现的验证消息设置如下：

var username = new LiveValidation('username', { validMessage: 'Valid Username.', wait: 500});

但是，我希望将其从“有效用户名”改为“有效用户名”。简单地显示一个绿色的刻度图像。我尝试通过将有效消息区的CSS更改为以下内容来实现此目的：

.LV_valid
{
    background-image: url('green_tick.gif');
    font-size:10px;
    color:#33CC33;
}

这会导致沿着打印的整个消息显示绿色标记，并且由于图像只有11x11，它适合大约5到6个图像。我已尝试删除有效消息，但随后它从LiveValidation.js文件中打印出默认的“谢谢”消息。我也尝试将默认消息更改为空白，但什么也没有显示。我还尝试使用图像位置作为消息，但这只会导致显示actaul location文本。

有人知道如何显示图像而不是文本吗？

请参阅此处的库：http://livevalidation.com/

Answer 1

很抱歉恢复了这篇文章..但对于那些需要它的人来说，答案是存在的。这对我来说很有效。

.LV_valid
{
    display: inline-block;       
    color: transparent;
    text-indent: 100%; 
    background-image: url('right.png');
    background-repeat: no-repeat;
    overflow: hidden;
}

.LV_invalid
{
    display: inline-block;       
    color: transparent;
    text-indent: 100%; 
    background-image: url('wrong.png');
    background-repeat: no-repeat;
    overflow: hidden;
}

Answer 2

这个CSS应该做你想做的事情：

.LV_valid
{
    background-image: url('green_tick.gif');
    width: 0;
    height: 0;
    padding: 11px 11px 0 0;
    overflow: hidden;
}

说明:这些width、height和overflow值隐藏了元素的所有内容，而填充值会以不允许显示内容但允许显示背景的方式添加和11x11空间。

jsFiddle (当然，使用不同的图片)：http://jsfiddle.net/uqRQp/

Answer 3

我把background-repeat: no-repeat和一些东西结合起来，把文本推到看不见的地方：

.LV_valid
{
    /* This ensures the element is displayed as a block-level element
    so that all the following CSS rules apply. */        
    display: inline-block;          

    /* This displays your image, but only once. */
    background-image: url('green_tick.gif');
    background-repeat: no-repeat;

    /* This pushes the text out of the way so it can't be seen. */
    height: 0px !important;
    height: /**/ 11px; /* IE consistency hack */
    padding-top: 11px;
    overflow: hidden;
}