<input class="text" type="text" placeholder="请输入关键词~~~" name="search" maxlength="2000" autocomplete="off"> css怎么让input聚焦向左滑动变宽

CSS可以让`<input>`元素在获取焦点（聚焦）时，通过改变宽度或边框等属性实现向左滑动并变宽的效果。通常，这可以通过使用`:focus`伪类和一些动画技巧来完成。以下是一个简单的实现方法：

1. 首先，设置一个初始的输入框宽度，比如正常状态下宽度较小：

.input-container {
  position: relative;
}

.input-field {
  width: 100px; /* 或者你想要的初始宽度 */
  border: 1px solid #ccc;
  outline: none;
  transition: width 0.3s ease-in-out; /* 添加过渡效果 */
}

2. 使用`:focus`伪类改变输入框的宽度，当获取焦点时宽度增加：

.input-field:focus {
  width: 200px; /* 增加后的宽度，可以根据需要调整 */
}

3. 如果你想实现更平滑的动画效果，可以使用关键帧动画（CSS3动画）：

@keyframes slide-in {
  from { width: 100px; }
  to { width: 200px; }
}

.input-field:focus {
  animation: slide-in 0.3s forwards; /* 动画持续时间，以及动画结束后保持状态 */
}

相关问题

<div class="layui-input-inline"> <input type="text" id="key4" class="layui-input" autocomplete="off" placeholder="请输入任务开始时间"> </div> <div class="layui-input-inline"> <input type="text" id="key5" class="layui-input" autocomplete="off" placeholder="请输入任务结束时间"> </div> <div class="layui-input-inline"> <input type="text" id="key6" class="layui-input" autocomplete="off" placeholder="请输入创建时间"> </div>改成日期控件

可以使用 layui 的日期选择器组件来实现。

首先，在页面中引入 layui 的日期选择器组件：

<link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.6/css/layui.min.css">
<script src="//cdn.bootcss.com/layui/2.5.6/layui.min.js"></script>

然后，在页面加载完成后，初始化日期选择器：

layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  // 开始时间
  laydate.render({
    elem: '#key4', // 绑定元素
    type: 'datetime' // 设定日期时间格式
  });
  
  // 结束时间
  laydate.render({
    elem: '#key5',
    type: 'datetime'
  });
  
  // 创建时间
  laydate.render({
    elem: '#key6',
    type: 'datetime'
  });
});

这样，上述代码中的文本框就会被替换成日期选择器，用户可以方便地选择日期和时间。

<form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">报表名称</label> <div class="layui-input-block"> <input type="text" name="reportName" required lay-verify="required" placeholder="请输入报表名称" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表组</label> <div class="layui-input-block"> <select name="reportGroup" lay-verify="required"> <option value=""></option> <option value="group1">分组1</option> <option value="group2">分组2</option> <option value="group3">分组3</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表路径</label> <div class="layui-input-block"> <input type="text" name="reportUrl" required lay-verify="required" placeholder="请输入报表路径" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表抽样条件路径</label> <div class="layui-input-block"> <input type="text" name="reportCdnUrl" required lay-verify="required" placeholder="请输入抽样条件路径" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否启用</label> <div class="layui-input-block"> <input type="checkbox" name="enable" lay-skin="switch" lay-filter="switchTest" lay-text="启用|禁用"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> 调整label的宽度为200

可以通过修改CSS样式来调整label的宽度为200，代码如下：

<style>
    .layui-form-label {
        width: 200px;
    }
</style>

将上述代码放在HTML代码之前或者在外部CSS文件中即可。