css - 下拉菜单的 CSS(样式组件)问题
问题描述
我正在开发一个下拉菜单,您可以在其中单击或聚焦输入,一个白色容器应该显示在输入的底部,问题是,焦点不起作用,我不知道为什么(我讨厌 css:/ )
所以这是代码
这是结构
<NavbartPart1SearchBar>
<input type="text" placeholder="Buscar en Facebook" maxLength={100} />
{/* Dropdown */}
<NavbarPart1Dropdown> </NavbarPart1Dropdown>
</NavbartPart1SearchBar>
export const NavbarPart1Dropdown = styles.div`
display: none;
position: absolute;
width: 100%;
height: 20vh;
background: white;
`;
export const NavbartPart1SearchBar = styles.div`
position: relative;
input{
width: 255px;
font-size: 1.53rem;
font-weight: 300;
padding: 1.23rem 1.75rem;
border-radius: 2.1rem;
background: #F0F2F5;
&:focus ${NavbarPart1Dropdown} {
display: flex;
}
}
`;
如您所见,输入有一个焦点事件,当我关注它时,我将 display flex 添加到另一个容器,但它不起作用,您看到我的代码有什么问题吗?
知道让我告诉你它应该是什么样子
你看到黑色的部分了吗?我希望它在焦点时出现,所以,如果你能帮助我,你很酷!
解决方案
+
您可以在 CSS中选择下一个同级元素。所以以下应该工作:
input:focus + ${NavbarPart1Dropdown} { display: block; }
推荐阅读
- aerospike - Aerospike- Python 客户端- 从 INFO_NODE 获取主机名
- html - CSS没有正确居中
- c - 与库函数 gets() 混淆
- html - 将输入文本与输入图像合并
- ios - 在 GKMatchmakerViewControllerDelegate 内部未调用方法“matchmakerViewControllerWasCancelled”和“matchmakerViewController”
- c++ - 我在哪里可以找到我的 c++ vb 应用程序的原始源代码?
- rust - 从 trait 方法返回对结构字段的可变引用时,如何修复生命周期不匹配?
- java - 休息服务添加额外的参数会引发错误
- r - 将数据框的所有列放入单个直方图中
- html - 为什么我的“flex” div 不遵守 padding-right?