antd 实色填底的单选按钮_将单选按钮样式化为正方形

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

Choice 1

Choice 2

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");

});

});