Question

我需要创建一个具有自动完成功能的输入字段，他们想要一种自定义类型的按钮，以显示该输入字段与输入字段不同。

但是我似乎无法自定义类-ms-expand，因为我所有的CSS都被忽略了。如您所见，它有display:none;，但仍显示。

.input, .input2{
  -webkit-appearance: menulist;
  -moz-appearance:menulist;
}

.input::-ms-expand{
   display:none;
   color:green;
   background-color:red;
   border-left:1px solid black;
}
    
.input2::-ms-expand{
   float:left;
   color:red;
   background-color:green;
   border-right:1px solid black;
}

<input id="input" class="input" />
<input id="input2" class="input2" />

Answer 1

我认为您可能在目录中有另一个CSS文件，从而使您正在编辑的文件转向过度。你检查了吗？

Answer 2

您的问题是您尝试将样式附加到带有伪元素的类上。实际上，您实际上应该只使用类名对其进行样式设置。

.input {
  display: none;
}

.input2 {
  background: red;
}

链接供您参考：https://codepen.io/Harsh89/pen/VGbmVg

我建议不要使用-ms-expand，但还有其他选择。 https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-expand

CSS-输入字段上的自定义下拉按钮

2 个答案: