单选按钮，没有圆形，但带有矩形标签

Question

我在Hollister上看到了这个有趣的尺寸选择：

看起来像是带有标签的单选按钮吗？

<ul class="tiles" data-tile-size="large" data-tile-layout="collapsed">

<li>
<div class="tile-input product-attrs__attr " data-state="default">
    <input type="radio" value="XS" name="size-primary" data-size="radio_size_primary_XS_30342822" aria-describedby="product-primary-size-tiles" id="radio_size_primary_XS_30342822"/>
    <label class="tile-content" for="radio_size_primary_XS_30342822" data-variant="default">
    <span class="tile-text">XS</span>       
    </label>
</div>
</li>

</ul>

但是他们的CSS非常混乱，我不知道他们如何设置样式：（

有机会解决这个问题吗？谢谢!!!

Answer 1

这个想法是，您用一个标签包裹一个输入和一个跨度，然后隐藏输入并设置跨度的样式，以使按钮看起来如何。

单击范围时，将自动选中/取消选中输入（因为它们在标签内），并且您可以使用input：checked + span更改范围的样式：这表示选中输入的下一个同级范围）。

.input-container {
  display: flex;
}

input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
} /* this keeps the input accessible. Don't just display: none */

input:checked + span {
  background-color: #000;
  color: #fff;
}

span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 40px;
  border: 1px solid #000;
  border-right: 0;
  background-color: #fff;
  cursor: pointer;
  font-size: 12px;
}

label:last-of-type span {
  border-right: 1px solid #000;
}

<div class="input-container">
  <label>
    <input type="radio" name="radios" />
    <span>XS</span>
  </label>

  <label>
    <input type="radio" name="radios"/>
    <span>S</span>
  </label>

  <label>
    <input type="radio" name="radios" />
    <span>M</span>
  </label>

  <label>
    <input type="radio" name="radios" />
    <span>L</span>
  </label>
  
  <label>
    <input type="radio" name="radios" />
    <span>XL</span>
  </label>
  
  <label>
    <input type="radio" name="radios" />
    <span>XXL</span>
  </label>
</div>

Answer 2

使用一些CSS，您可以通过设置span tag

的样式来实现

我在这个website里玩耍。

检出this！

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 0;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 0;
	background: white;
}

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>