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

要实现静态选座位效果，可以使用HTML和CSS中的input和label标签组合来实现。以下是一个简单的示例：

HTML代码：

<div class="seat">
  <input type="checkbox" id="seat-1" />
  <label for="seat-1">1</label>
</div>
<div class="seat">
  <input type="checkbox" id="seat-2" />
  <label for="seat-2">2</label>
</div>
<!-- 其他座位 -->

CSS代码：

.seat {
  display: inline-block;
  margin: 10px;
}

input[type="checkbox"] {
  display: none;
}

label {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #ccc;
  cursor: pointer;
}

input[type="checkbox"]:checked + label {
  background-color: #007bff;
  color: #fff;
}

解释：

首先，每个座位都是一个div容器，里面包含一个input checkbox和一个label标签。

input[type="checkbox"]的样式设置为display: none，这样就隐藏了checkbox。label标签的样式设置为块级元素，并且设置了宽度、高度、文本对齐方式和边框等样式。

在CSS中，使用“+”选择器来选择与选中的checkbox相邻的label标签。当checkbox被选中时，就会应用选中样式，这里设置了背景颜色和文字颜色。

这样，当用户点击座位时，就会选中相应的checkbox，因此相邻的label标签就会应用选中样式。这种方法可以实现静态选座位的效果。