jquery - 将单选按钮样式化为正方形

Question

我得到了一个带有方形单选按钮的设计。

有没有办法让单选按钮看起来像这样？

我认为我可以做到这一点的唯一方法是使用图像，并通过 $.on('click') 方法交换选中/选中状态。

Answer 1

只用 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那里的解释，它会更容易理解。