使用CSS 3在div中输入时扩展搜索输入字段

，可以通过以下步骤实现：

1. 创建一个包含搜索输入字段的div元素，可以使用HTML代码如下：

<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
</div>

1. 使用CSS样式来扩展搜索输入字段的外观和功能，可以使用CSS代码如下：

.search-container {
  position: relative;
}

.search-input {
  width: 200px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.search-input::placeholder {
  color: #999;
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url(cancel-icon.png) no-repeat center center;
  background-size: 100% 100%;
  cursor: pointer;
}

上述CSS代码中，.search-container类设置了相对定位，以便在后续样式中使用绝对定位。.search-input类设置了搜索输入字段的基本样式，包括宽度、内边距、边框、边框圆角和阴影效果。:focus伪类用于设置输入字段获取焦点时的样式，包括边框阴影加深。::placeholder伪元素用于设置输入字段的占位符文本样式。::-webkit-search-cancel-button伪元素用于自定义取消按钮的样式，可以替换为自定义的取消按钮图标。

1. 将上述CSS样式应用到HTML中的div元素和输入字段，可以通过以下方式实现：

<style>
  /* 将上述CSS代码放在这里 */
</style>

<div class="search-container">
  <input type="text" class="search-input" placeholder="搜索...">
</div>

通过以上步骤，就可以使用CSS 3在div中输入时扩展搜索输入字段。这种扩展可以提升搜索输入字段的外观和用户体验，使其更加美观和易用。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS 3：腾讯云提供的CSS 3云服务，用于实现丰富的样式效果和交互动画。
• 腾讯云Web+：腾讯云提供的一站式Web服务平台，可快速搭建和部署网站、应用和服务，包括前端开发、后端开发、数据库等方面的支持。
• 腾讯云CDN：腾讯云提供的内容分发网络服务，可加速网站和应用的访问速度，提供更好的用户体验。
• 腾讯云WAF：腾讯云提供的Web应用防火墙服务，可保护网站和应用免受常见的Web攻击和漏洞利用。
• 腾讯云安全组：腾讯云提供的网络安全组服务，可对云服务器的入站和出站流量进行安全控制和管理。
• 腾讯云云服务器：腾讯云提供的弹性云服务器服务，可满足各种规模和需求的计算资源需求。
• 腾讯云对象存储：腾讯云提供的高可靠、低成本的对象存储服务，可用于存储和管理各种类型的数据和文件。
• 腾讯云区块链服务：腾讯云提供的区块链服务，可帮助用户快速构建和部署区块链应用和解决方案。
• 腾讯云人工智能：腾讯云提供的人工智能服务，包括图像识别、语音识别、自然语言处理等方面的支持。
• 腾讯云物联网：腾讯云提供的物联网服务，可帮助用户连接、管理和控制物联网设备和数据。
• 腾讯云移动开发：腾讯云提供的移动应用开发服务，包括移动后端云服务、移动测试云服务等方面的支持。
• 腾讯云音视频处理：腾讯云提供的音视频处理服务，可用于实时音视频通信、音视频转码、音视频录制等场景。
• 腾讯云元宇宙：腾讯云提供的元宇宙服务，可构建虚拟现实和增强现实应用和场景。