html气泡表单验证,使用纯CSS显示气泡提示，表单验证时好用

在使用表单验证时，如果字段验证有错误，比较美观的做法是显示一个气泡提示框，如下图：

其实要实现这个效果，重点就在于那个小三角箭头，下面把HTML和CSS代码贴出来，挺有趣

错误消息

/* 这是圆角方框的效果 */

.error {

height:15px;

background-color:#FFFE36;

font-size:11px;

border:1px solid #E1E16D;

padding:4px 10px;

color:#000;

display:none;

-moz-border-radius:4px;

-webkit-border-radius:4px;

-moz-border-radius-bottomleft:0;

-moz-border-radius-topleft:0;

-webkit-border-bottom-left-radius:0;

-webkit-border-top-left-radius:0;

-moz-box-shadow:0 0 6px #ddd;

-webkit-box-shadow:0 0 6px #ddd;

}

/* 这里是三角箭头的效果 */

.error em {

display:block;

width:0;

height:0;

border:10px solid;

border-color:#FFFE36 transparent transparent;

/* 位置*/

position:absolute;

bottom:-17px;

left:60px;

}

根据以上实现方法，我们还可以制作右侧的气泡，效果图如下：

只需对CSS稍作改动

/* 这是圆角方框的效果 */

.error {

height:15px;

background-color:#FFFE36;

font-size:11px;

border:1px solid #E1E16D;

padding:4px 10px;

color:#000;

display:none;

-moz-border-radius:4px;

-webkit-border-radius:4px;

-moz-border-radius-bottomleft:0;

-moz-border-radius-topleft:0;

-webkit-border-bottom-left-radius:0;

-webkit-border-top-left-radius:0;

-moz-box-shadow:0 0 6px #ddd;

-webkit-box-shadow:0 0 6px #ddd;

}

/* 这里是三角箭头的效果 */

.error em {

display:block;

width:0;

height:0;

border:10px solid;

border-color:transparent #FFFE36 transparent transparent;

/* 位置*/

position:absolute;

left:-17px;

}

如果配合jQueryTools Validate来使用，非常方便

$("#contactForm").validator({

position:"center right",//气泡提示位置显示在右侧

offset: [0, 10],//由于小三角箭头位置左移，所以要把信息提示的整体位置右移一点，以免戳到表单字段

message: '

'//指定消息提示框内部的HTML结构

});