<div class="form-group">
    <label for="captcha" class="col-sm-2 control-label">
        验证码
    </label>
    <div class="col-sm-10" id="captcha_container">
        <input type="text" name="captcha" class="form-control" id="captcha" placeholder="请输入验证码">
        <script>
            var change_captcha = function(selecter){
                var url = $(selecter).attr('src');
                if (-1 != url.lastIndexOf('#')) {
                    url = url.substring(0, url.lastIndexOf('#'));
                }
                $(selecter).attr('src',url + "#" + Math.random());
            }
            $(function() {
                $('#captcha').focus(function(event) {
                    if (!$('#captcha_img').length) {
                        $('#captcha').before('<img class="img-rounded img-captcha" width="200" id="captcha_img" onclick="change_captcha(\'#captcha_img\');" src="{:url('index/api/captcha')}" alt="验证码" title="点击更换验证码">')
                    }
                    $('#captcha_img').css({
                        top: $("#captcha").position().top-$('#captcha_img').height()-2,
                    });
                    $('#captcha_img').show();
                });
                $('#captcha_container').hover(function() {
                    $('#captcha_img').show();
                }, function() {
                    $('#captcha_img').hide();
                });
            });
        </script>
    </div>
</div>
<style>
    /*验证码*/
    .img-captcha{
        width: 200px;
        display: none;
        cursor: pointer;
        padding: 0px;
        position: absolute;
        height: 50px;
        top: -50px;
        border:1px solid #ccc;
        outline: 0;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.3);
        box-shadow: 0 5px 10px rgba(0,0,0,.3);
        z-index: 1000;
    }
</style>