将单选按钮样式化为正方形 [英] Styling radio buttons into a square

问题描述

我得到了一个带有方形单选按钮的设计.

有没有一种样式可以使单选按钮看起来像这样?

我认为唯一的方法是使用图像，然后通过$.on('click')方法交换检查/检查状态.

解决方案

您无需设置单选按钮的样式.只需使用div:

小提琴中的示例: http://jsfiddle.net/kLGf4/2/

html:

 <section>
    <header>
         <h1>Perfered Method of Contact</h1>

    </header>
    <div> <span>Choice 1</span>

        <div class="square-radio square-radio--clicked">
             <div class="square-radio--content"></div>
        </div>
    </div>
    <div> <span>Choice 2</span>

        <div class="square-radio">
            <div class="square-radio--content"></div>
        </div>
    </div>
</section>

css:

.square-radio {
    border: 1px solid black;
    margin: 2px;
    width: 40px;
    height: 40px;
    position: relative;

}
.square-radio--clicked .square-radio--content{
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: black;
    width: 20px;
    height: 20px;
}

js:

$(document).ready(function () {
    $(document).on("click", ".square-radio", function () {
        $(this).toggleClass("square-radio--clicked");
    });
});

I was given a design with square radio buttons.

Is there a way to style radio buttons to look like this?

The only way, I think I could accomplish this is by using images, and swap the checked/checked state via an $.on('click') method.

解决方案

You dont need to style a radio button. Just use a div:

Example in a fiddle: http://jsfiddle.net/kLGf4/2/

html:

 <section>
    <header>
         <h1>Perfered Method of Contact</h1>

    </header>
    <div> <span>Choice 1</span>

        <div class="square-radio square-radio--clicked">
             <div class="square-radio--content"></div>
        </div>
    </div>
    <div> <span>Choice 2</span>

        <div class="square-radio">
            <div class="square-radio--content"></div>
        </div>
    </div>
</section>

css:

.square-radio {
    border: 1px solid black;
    margin: 2px;
    width: 40px;
    height: 40px;
    position: relative;

}
.square-radio--clicked .square-radio--content{
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: black;
    width: 20px;
    height: 20px;
}

js:

$(document).ready(function () {
    $(document).on("click", ".square-radio", function () {
        $(this).toggleClass("square-radio--clicked");
    });
});

这篇关于将单选按钮样式化为正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！