input表单单选美化

 

input表单单选美化

Demo下载    效果如图：

css：

.choose,
    .choose ul {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        color: #b2b2b2;
        font-size: 14px;
        vertical-align: middle;
    }
    .choose ul {
        width: 80px;
        height: 26px;
        position: relative;
        margin: 0 10px;
        background: url(../images/choose_bg.png) no-repeat;
    }

    .choose ul li.choose_btn_img {
        width: 39px;
        height: 26px;
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/choose_btn.png) no-repeat;
    }

    .choose ul li.choose_btn_left,
    .choose ul li.choose_btn_right {
        width: 41px;
        height: 26px;
        top: 0;
        position: absolute;
        cursor: pointer;
    }

    .choose ul li.choose_btn_left { left: 0; }
    .choose ul li.choose_btn_right { right: 0; }

    .choose input { display: none; }

    .choose span.now { color: #009ddf; }

 

图片：

 

choose_bg.png 

choose_btn.png 

 

html：

    <div class="choose">
        <span class="now">男</span>
        <ul>
            <li class="choose_btn_img"></li>
            <li class="choose_btn_left"></li>
            <li class="choose_btn_right"></li>
        </ul>
        <input class="men" type="radio" name="sex" value="男" checked="checked" />
        <input class="women" type="radio" name="sex" value="女" />
        <span>女</span>
    </div>

javascript：

    <script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $(".choose_btn_left").hide();
        $(".choose_btn_right").click(function () {
            $(this).hide();
            $(".choose_btn_img").animate({"left": "41px"},300);
            $(".choose_btn_left").show();
            $(".choose>span").toggleClass("now");
            $(".choose>input.women").attr("checked",true).siblings("input").attr("checked",false);
        });
        $(".choose_btn_left").click(function () {
            $(this).hide();
            $(".choose_btn_img").animate({
                "left": "0"
            },300);
            $(".choose_btn_right").show();
            $(".choose>span").toggleClass("now");
            $(".choose>input.men").attr("checked",true).siblings("input").attr("checked",false);
        });
    })
    </script>