我得到了一个带有方形单选按钮的设计。
有没有办法让单选按钮看起来像这样?
我认为我可以做到这一点的唯一方法是使用图像,并通过 $.on('click')
方法交换选中/选中状态。
最佳答案
只用 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);
}
<label>
<input type="radio" name="radio">
<span>EMAIL</span>
</label>
<label>
<input type="radio" name="radio">
<span>PHONE</span>
</label>
查看代码注释以获得更深入的解释,但这是基础知识:
首先创建一个 <label>
作为 wrapper 。我们使用标签是因为在标签上触发的事件也会在关联的输入上触发:
<label></label>
向其添加输入:
<label>
<input type="radio" name="demo">
</label>
请记住,单选按钮必须具有相同的名称才能分组。现在我们抛出 <span>
在输入之后,所以我们在 CSS 中有一些目标。
<label>
<input type="radio" name="demo">
<span></span>
</label>
HTML 已全部设置好。检查CSS那里的解释,它会更容易理解。
关于jquery - 将单选按钮样式化为正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24516958/