0

Basically I have input form

<div class="input-area search-input-icon">
<span></span>
<input type="text" value="Enter" class="search-input">
</div>

and css for my input

.search-input-icon span {
    position: absolute;
    background-image: url('../img/../img/tek-s24f4d4af1d.png');
    background-repeat: no-repeat;
    background-position: 0 -388px;
    width: 21px;
    height: 21px;
    display: block;
    top: 25%;
    left: 5%;
}

.search-input:focus{
       border-color:#faa82b;
        .search-in-out-icon {
            span{
                @include tek-sprite(hover-form-search);
            }
        }
    }

but whenever focus on input form my span icon is not change why ?

ani_css
  • 2,118
  • 3
  • 30
  • 73
  • 1
    you might be better with `.search-input-icon span:focus` and changing the `background-position` – Andrew May 12 '16 at 12:37
  • You cannot change the parent element by event of the children. See [There is currently no way to select the parent of an element in CSS.](http://stackoverflow.com/a/1014958/6238076) – gdlmx May 12 '16 at 12:40

0 Answers0