Html 如何设置搜索框的样式

我正在尝试设置搜索框的样式，但它无法工作。在.search input下，我尝试将搜索框的背景颜色更改为绿色，并尝试使搜索框变长。有人看到我的错误了吗？按下搜索图标时，搜索框将下拉

jsfiddle-

document.getElementById（“搜索标签”）.addEventListener（“单击”，函数（e）{
如果（e.target==此）{
e、 预防默认值（）；
这个.classList.toggle（“单击”）；
}
});
/*--------------------------------------------------------------
##搜寻
--------------------------------------------------------------*/
#ht报头。搜索字段{
填充：0 10px 0 34px；
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
}
#ht报头。搜索字段：焦点{
背景色：#fff；
边框：2个实心#c3c0ab；
光标：文本；
大纲：0；
}
#ht报头。搜索表单{}
.搜索切换：悬停#ht报头.搜索表单{
显示：块；
}
.搜索表单.搜索提交{
显示：无；
}
.查册表格{
位置：相对位置；
}
.搜索表单标签{
位置：相对位置；
背景：url（'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png'）0 0不重复；
背景尺寸：封面；
高度：70像素；
}
.搜索输入{
转换：translateY（-100%）；
不透明度：0；
位置：绝对位置；
最高：100%；
过渡：不透明度.25s，变换.25s；
左：0；
z指数：-1；
边界：0；
大纲：0；
背景色：#32CD32；
}
.搜索标签，
.搜索输入{
背景：#ccc；
填充：.5em；
显示：内联块；
}
.单击+.搜索输入{
不透明度：1；
变换：translateY（0）；
}

这可能是因为它的特殊性。如果您使用下面的CSS，它将很好地工作

.clicked + .search-input {
  opacity: 1;
  transform: translateY(0);
  width: 200px; /* or whatever you want it to be */
  background: lightgreen;
}


document.getElementById（“搜索标签”）.addEventListener（“单击”，函数（e）{
如果（e.target==此）{
e、 预防默认值（）；
这个.classList.toggle（“单击”）；
}
});
/*--------------------------------------------------------------
##搜寻
--------------------------------------------------------------*/
#ht报头。搜索字段{
填充：0 10px 0 34px；
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
}
#ht报头。搜索字段：焦点{
背景色：#fff；
边框：2个实心#c3c0ab；
光标：文本；
大纲：0；
}
#ht报头。搜索表单{}
.搜索切换：悬停#ht报头.搜索表单{
显示：块；
}
.搜索表单.搜索提交{
显示：无；
}
.查册表格{
位置：相对位置；
}
.搜索表单标签{
位置：相对位置；
背景：url（'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png'）0 0不重复；
背景尺寸：封面；
高度：70像素；
}
.搜索输入{
转换：translateY（-100%）；
不透明度：0；
位置：绝对位置；
最高：100%；
过渡：不透明度.25s，变换.25s；
左：0；
z指数：-1；
边界：0；
大纲：0；
背景色：#32CD32；
}
.搜索标签，
.搜索输入{
背景：#ccc；
填充：.5em；
显示：内联块；
}
.单击+.搜索输入{
不透明度：1；
变换：translateY（0）；
宽度：200px；
背景颜色：浅绿色；
}

这是因为你有
.search标签，
.search输入
在声明了
之后.search输入{background color:#32CD32；}
。CSS，层叠样式表，自上而下阅读，因此由于
.search标签，.search input
在后面，它会读取，覆盖前面的语句并将背景置为灰色。
.search label、.search input
之间的逗号表示它正在将这些样式应用于每个样式

如果你只是移动他们被调用的顺序，它将很好地工作
 问题是.search输入背景色由
.search标签、.search输入
描述符编辑，这将撤消您的工作

.search-input {
      transform: translateY(-100%);
      opacity: 0;
      position: absolute;
      top: 100%;
      transition: opacity .25s, transform .25s;
      left: 0;
      z-index: -2;
      border: 1;
      outline: 0;
      background-color:#32CD32;
    }

.search-label, .search-input {
      //background: #ccc; //This can be deleted, as it is undoing your work
      padding: .5em;
      display: inline-block;
 }

.clicked + .search-input {
      opacity: 1;
      width: 200px;
      background-color:#32CD32;
      transform: translateY(0);
 }

您确定您拥有所有相关代码吗？因为当我运行代码段时，我没有看到任何看起来像搜索框的东西。它会下拉，很抱歉我忘了提及-按搜索图标。我将根据您提供的代码生成代码段。在我的屏幕上，它是绿色的。我无能为力。