0

Preciso mudar a opacidade do placeholder quando input in focus mas não to conseguindo em sass

Html

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

Meu 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}
}

Meu código https://jsfiddle.net/fcothiagofreitas/ubxzswkw/

Aqui com css funciona mais não consigo colocar para funcionar com sass http://jsfiddle.net/XDutj/27/

1 Resposta 1

0

Eu testei o código no Codepen e o quê rolava é que os placeholders ficavam aninhados com o seletor pai, ao invés de colados nele. Usando o &, que funciona como um this, uma referência ao seletor pai, o seletor passa a funcionar e aplicar o estilo ao placeholder do elemento com focus.

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

http://codepen.io/VitorLuizC/pen/XMPaBz/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .