造型单选按钮到一个正方形
我得到了一个带方形单选按钮的设计。
有没有办法将单选按钮设置为这样？
唯一的方法，我认为我可以通过使用图像，并通过$.on('click')方法交换已检查/检查状态。
你不需要设置单选按钮的样式。 只需使用div：
小提琴中的示例： http ： //jsfiddle.net/kLGf4/2/
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"); }); });
这可以很容易地用CSS完成，不需要JS。 基本概念是设置一个元素作为输入的兄弟，创建一个“假的”单选按钮：
/* * Hide the inputs. */ input { display: none; } /* * Then, style the label so it looks like however you want. * Here's a quick rundown of how I did it here: */ /* * Some basic positioning styles, and we give it the pointer cursor to show * that it's clickable */ label { display: inline-block; padding: 5px 10px; cursor: pointer; } /* * With how I decided to build this, the position: relative is super important. * We're going to position a pseudo element within this element(As it is the containing box) */ label span { position: relative; line-height: 22px; } /* * Because we're using pseudo elements, a content property is required to make them appear. */ label span:before, label span:after { content: ''; } /* * We are using the :before peudo elemnt as the actual button, * then we'll position the :after over it. You could also use a background-image, * font-icon, or really anything if you want different styles. * For the specific style we're going for, this approach is simply the easiest, but * once you understand the concept you can really do it however you like. */ label span:before { border: 1px solid #222021; width: 20px; height: 20px; margin-right: 10px; display: inline-block; vertical-align: top; } label span:after { background: #222021; width: 14px; height: 14px; position: absolute; top: 2px; left: 4px; transition: 300ms; opacity: 0; } /* * This is the most important part of this whole file, if you understand what's happening here * you can really make this in so many different ways. * * We start by selecting the input inside of the label, with "label input". From there we use the * ":checked" selector to *only* select the input when it is checked. We then use the immediate sibling * selector(+) to select the span, and then it's pseudo element :after(What we are using to mark the button) * Because we already styled the :after, all we have to do is set the opacity to 1, making it fade in. */ label input:checked+span:after { opacity: 1; } /* * A little styling for the demo */ body { background: #fbfbfb; font-family: Arial; font-weight: bold; color: rgba(0, 0, 0, 0.7); }
这是我所知道的最简单的纯CSS解决方案，不需要标签或脚本。 完全兼容性需要几个供应商前缀：
input[type='radio'] { box-sizing: border-box; appearance: none; background: white; outline: 2px solid #333; border: 3px solid white; width: 16px; height: 16px; } input[type='radio']:checked { background: #333; }
如上所述， box-sizing和appearance属性应该以供应商为前缀：
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none;
试试这个：
HTML：
CSS：
label { width: 125px; display: block; float: left; } label input { display: none; } label span { display: block; width: 17px; height: 17px; border: 1px solid black; float: left; margin: 0 5px 0 0; position: relative; } label.active span:after { content: " "; position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; background: black; }
JS（需要jquery）：
$(document).ready(function () { $('label').click(function() { $('.active').removeClass("active"); $(this).addClass("active"); }); });
这是一个小提琴，你可以看到它在行动： http ： //jsfiddle.net/wqdHE/2/