css 选座,纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

要实现静态选座位效果，可以使用HTML的input和label元素结合使用的小技巧。

首先，我们可以使用input元素来创建座位的checkbox，然后使用label元素来包裹input元素，并且设置label元素的样式来表示座位。

例如，我们可以为label元素设置一个宽度和高度，以及一个背景颜色来表示座位的状态，比如已选或可选等。

接着，我们可以使用CSS中的伪类选择器来为不同状态的座位设置不同的样式，比如:hover或:checked等。

最后，我们可以使用CSS中的flexbox布局或者grid布局来排列座位，从而实现选座位效果。

下面是一个示例代码：

<div class="seat-map">
  <div class="seat-row">
    <label for="seat-1" class="seat available"></label>
    <input type="checkbox" id="seat-1" class="hidden" />
    <label for="seat-2" class="seat unavailable"></label>
    <input type="checkbox" id="seat-2" class="hidden" />
    <label for="seat-3" class="seat selected"></label>
    <input type="checkbox" id="seat-3" class="hidden" />
  </div>
  <div class="seat-row">
    <label for="seat-4" class="seat available"></label>
    <input type="checkbox" id="seat-4" class="hidden" />
    <label for="seat-5" class="seat available"></label>
    <input type="checkbox" id="seat-5" class="hidden" />
    <label for="seat-6" class="seat available"></label>
    <input type="checkbox" id="seat-6" class="hidden" />
  </div>
</div>

.seat-map {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  margin: 0 auto;
}

.seat-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.seat {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.available {
  background-color: #a3d2ca;
}

.selected {
  background-color: #f9d6c1;
}

.unavailable {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

.hidden {
  display: none;
}

/* 当鼠标放在座位上时，改变座位的颜色 */
.seat:hover {
  background-color: #f1a7a7;
}

/* 当座位被选中时，改变座位的颜色 */
:checked + .seat {
  background-color: #f1a7a7;
}

/* 当座位不可用时，改变座位的颜色 */
:disabled + .seat {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

在这个示例代码中，我们使用了flexbox布局来排列座位，并且为不同状态的座位设置了不同的样式。通过使用伪类选择器和:checked选择器，我们可以在座位被选中或鼠标放在座位上时改变座位的颜色。