将单选按钮样式化为正方形 [英] 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屋!
查看全文