CODEWITHSUNDEEP
htmlcss
Eyeless Whim
Eyeless Whim

Reputation: 270

Chrome CSS: adjacent selector with sibling using pseudo element doesn't work

I'm using placeholders for a control that takes user input.

If the placeholder is blank, it displays the placeholder.

I'd like to have the each input is separated by a span.

I'm trying to match the color of the span separators with the input placeholder color.

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" >

This is approach is working for IE using the :-ms-input-placeholder selector.

Any thoughts or insights as to why this isn't working in Chrome (or Mozilla) would be greatly appreciated.

Upvotes: 0

Views: 300

Answers (1)

Temani Afif
Temani Afif

Reputation: 274307

You are probably looking for :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">

Upvotes: 2

Related Questions