Change placeholder opacity when input in focus

Question

Change placeholder opacity when input in focus

Navigation

#1 by (0 votes)

0

I need to change the opacity of the placeholder when input in focus but not to achieve in sass

Html

<input type="text" name="search_cursos" id="search_cursos" placeholder="Procure a vaga que deseja" class="procurarvaga">

My scss

input.procurarvaga{
        text-align: center;
        &:focus{
            @include placeholder {
                @include opacity(.2);
            }
        }
    }

Mixins

@mixin opacity($opacity) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: alpha(opacity=$opacity-ie);
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}
}

My code link

Here with css works the most I can not put to work with sass link

css3 sass

asked by anonymous 20.03.2017 / 14:55

1 answer

Interface does not update in the Emulator Object is not filled

score 0 · Accepted Answer

I tested the code in Codepen and what happened was that the placeholders were nested with the parent selector, rather than pasted into it. Using & , which functions as a this , a reference to the parent selector, the selector starts working and apply the style to the element's placeholder with focus. p>

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}
}

link