CSS 伪类修改input选中样式的示例代码

当用户点击一个input元素并进行文本输入时，该输入框会呈现选中状态，此时可以使用CSS伪类的方式来修改选中状态下输入框的样式。

下面是修改input选中样式的示例代码:

input:focus {
  outline: none; /* 取消选中状态的默认外边框 */
  border: 2px solid blue; /* 自定义选中状态下的边框样式 */
  box-shadow: 0 0 5px blue; /* 添加阴影效果以突出显示 */
}

上述代码中，我们使用:focus伪类来定位input元素获取焦点时的样式，通过outline: none取消默认的选中状态边框，然后自定义了选中状态下的边框样式，以及添加了阴影效果来突出显示选中状态。

接下来，我们来看一个实际应用的例子。假设我们需要一个搜索框，当用户点击进入搜索框并开始输入时，输入框样式会发生变化。代码如下：

<div class="search-box">
  <input type="text" placeholder="Search here...">
</div>

/* 整个搜索框容器的样式 */
.search-box {
  position: relative;
  margin: 20px 0;
  width: 300px;
  height: 50px;
  border-radius: 25px;
  overflow: hidden;
  background-color: #f8f8f8;
}

/* 搜索框输入框的样式 */
.search-box input[type="text"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
  border: none;
  outline: none;
  font-size: 18px;
  color: #333;
  background-color: transparent;
}

/* 输入框获取焦点时的样式 */
.search-box input[type="text"]:focus {
  border: none;
  outline: none;
  box-shadow: 0 0 5px #00bcd4;
}

在这个例子中，我们使用了:focus伪类来将输入框的边框样式、颜色和阴影效果进行了自定义，让用户在输入时能够明显地感受到选中状态，提升了用户体验。