CODEWITHSUNDEEP
htmlcssautocompletewebkitstylesheet
cicloon
cicloon

Reputation: 1099

Styling tag related to an input with webkit-autofill pseudoclass

I'm trying to style a sibling related to an input with the -webkit-autofill pseudoclass like this:

input:-webkit-autofill~span.add-on { background-color: #FAFFBD;}

But it doesn't work. Is it posible to achieve what I'm trying? Or should I rely on javascript for this?

Updated with HTML:

<div>
  <span class="add-on icon-user"></span
  <input type="text" id="user_name" name="user[user_name]">
</div>

To clear up things, what I want to achieve is to set the same background color for the span element when the input is autofilled.

Upvotes: 0

Views: 1115

Answers (1)

feeela
feeela

Reputation: 29932

You can't style a preceding sibling with pure CSS. The selector ~ matches a sibling that comes after the first element.

Or as one could read it in the MDN docs:

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

https://developer.mozilla.org/en-US/docs/CSS/General_sibling_selectors

input:-webkit-autofill~span.add-on { background-color: #FAFFBD;}

would match the span in:

<div>
    <input type="text" id="user_name" name="user[user_name]">
    <span class="add-on icon-user"></span>
</div>

Upvotes: 1

Related Questions