Question

我正在使用占位符作为接受用户输入的控件。

如果占位符为空白，则显示占位符。

我希望每个输入都用一个跨度分隔。

我正在尝试将跨度分隔符的颜色与输入的占位符颜色进行匹配。

input {
    width:30px;
    border:none;
}
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}

/*this doesn't work */
input::-webkit-input-placeholder+span { /* Chrome/Opera/Safari */
  color: red !important;
}

<input placeholder="mm"><span>/</span><input style="padding-left:5px" placeholder="yyyy" >

此方法适用于使用:-ms-input-placeholder选择器的IE。

任何对此为何无法在Chrome（或Mozilla）中运行的想法或见解，将不胜感激。

Answer 1

您可能正在寻找:placeholder-shown

input {
  width: 30px;
  border: none;
  color: red;
}

input::-webkit-input-placeholder {
  color: gray;
}
input:placeholder-shown+span {
  color: gray;
}

span {
  color: red;
  font-size:20px;
  padding:0 10px;
}

<input placeholder="TEST"><span>/</span><input style="padding-left:5px" placeholder="TEST">

Chrome CSS：使用伪元素的同级相邻选择器不起作用

1 个答案: