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:
html:
Perfered Method of Contact
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");
});
});