CSS 输入选择器

CSS 输入选择器是一种可以根据用户输入内容来选择元素的选择器。在网页中，用户可以输入不同的值，程序可以根据这些输入值来显示不同的内容。例如，用户可以输入一个城市名称，程序可以根据输入值来显示这个城市的信息。利用 CSS 输入选择器，程序员可以实现这样的交互效果。

语法

输入选择器使用 input[type="value"] 的格式来定义，其中 type 是指输入框的类型，value 是指输入框的值。例如，要选择一个类型为文本的输入框，其值为 "search" 的，可以使用如下的语法：

input[type="search"] {
  /* 定义样式 */
}

还可以直接选择文本框，代码如下：

input {
  /* 定义样式 */
}

示例

1. 点击按钮进行搜索

<form>
  <input type="text" id="search" placeholder="搜索">
  <button type="submit">搜索</button>
</form>
<div id="result"></div>

#search {
  width: 200px;
  padding: 5px;
  font-size: 16px;
}
button {
  padding: 5px 10px;
  font-size: 16px;
}
#result {
  margin-top: 20px;
  display: none;
}
input:focus ~ #result {
  display: block;
}

这个示例中，当用户在输入框中输入内容并点击搜索按钮时，程序可以根据输入的内容来显示搜索结果。在 CSS 中，可以利用 :focus 伪类选择输入框获得焦点时的样式。

2. 根据选择框进行筛选

<select id="select">
  <option value="all">全部</option>
  <option value="red">红色</option>
  <option value="blue">蓝色</option>
  <option value="green">绿色</option>
</select>
<div class="box red">红色方块</div>
<div class="box blue">蓝色方块</div>
<div class="box green">绿色方块</div>

.box {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.box:not(.red) {
  display: none;
}
#select[value="all"] ~ .box {
  display: block;
}
#select[value="red"] ~ .red {
  display: block;
}
#select[value="blue"] ~ .blue {
  display: block;
}
#select[value="green"] ~ .green {
  display: block;
}

这个示例中，当用户在选择框中选择不同的颜色时，程序可以根据用户的选择来显示不同颜色的方块。在 CSS 中，可以使用 :not 伪类来选择除了某个类别之外的元素，同时使用输入选择器来针对不同的选择框值进行选择。

总结

CSS 输入选择器可以灵活地根据用户的输入内容来选择元素，可以实现一些交互性强的效果，如搜索，筛选等。程序员在使用时应该根据具体的需求，选择合适的语法和样式，以实现更好的用户体验。