Html css3转换无法在中使用伪类焦点

我试图将过渡效果应用于div，但它不起作用。我使用的是bootstrap3

<form class="navbar-form meco-navbar-form navbar-left">
    <div class="form-group meco-search">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
</form>

在这段代码中，输入的宽度始终为100%，当我单击输入时，自定义搜索的宽度会发生变化。 它的工作很好，但我不能应用过渡效果。 下面是不同的css代码，我试图这样做，但失败了

.meco-search{
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;
}
.meco-search:active{
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;
}
.meco-search:focus-within{
    width:83% !important;
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;   
}

---

请告诉我哪里错了。

要在

输入

标签上进行

宽度的
转换
，您需要删除
！重要信息
来自
。自定义搜索输入

在样式声明中使用重要规则时，此
声明优先于任何其他声明


。自定义搜索输入{
宽度：100%；
过渡：宽度1s；
}
.自定义导航栏表格{
宽度：600px！重要；
}
.自定义搜索{
过渡特性：宽度；
过渡时间：4s；
过渡延迟：2s；
}
.自定义搜索：活动{
过渡特性：宽度；
过渡时间：4s；
过渡延迟：2s；
}
.自定义搜索输入：焦点{
宽度：50%；
}

搜寻
你能帮我拉小提琴吗？你可以访问查看浏览器对pseudo class:focus-in的支持。这不是我要求的。您可以转到查看实际内容。您可以查看链接并告诉我们是否找到问题？请添加适当的详细信息和代码。你的HTML标记是正确的，但是你能提供正确的css代码吗。因为我可以在提供的链接的输入标签上看到相同的转换问题。请告诉我，我现在应该怎么做？
.meco-search{
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;
}
.meco-search:active{
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;
}
.meco-search:focus-within{
    width:83% !important;
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 2s;   
}