Question

我正在尝试为Sass 3.3.1中的输入字段（针对不同的浏览器）设置占位符样式，并希望在字段聚焦时更改不透明度。我很难将伪类和伪元素与＆符号组合在一起。以下是编译错误：

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder{

    ... some default styling

    :focus#{&}{
        opacity: 0;
    }
}

可以这样做吗？

修改

这是我要找的输出：

::-webkit-input-placeholder {
    opacity: 1;
}
:-moz-placeholder{
    opacity: 1;
}
::-moz-placeholder{
    opacity: 1;
}
:-ms-input-placeholder{
    opacity: 1;
}
:focus::-webkit-input-placeholder {
    opacity: 0;
}
:focus:-moz-placeholder{
    opacity: 0;
}
:focus::-moz-placeholder{
    opacity: 0;
}
:focus:-ms-input-placeholder{
    opacity: 0;
}

Answer 1

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

// Transitions for all: @include transition($transition);
$transition: all .3s ease;
@mixin transition($value) {
    -webkit-transition: $value;
    -moz-transition: $value;
    -ms-transition: $value;
    -o-transition: $value;
    transition: $value;
}

// Input placeholder animation: @include placeholder { color: #000 }
@mixin placeholder {
    &::-webkit-input-placeholder {
        @content;
    }
    &:-moz-placeholder {
        @content;
    }
    &::-moz-placeholder {
        @content;
    }
    &:-ms-input-placeholder {
        @content;
    }
}

// How to use:
input {
    text-overflow: ellipsis;
    color: mediumseagreen;
    @include placeholder {
        color: cornflowerblue;
        transition: $transition;
        @include opacity(1);
    }
    &:focus {
        @include placeholder {
            @include opacity(0);
            transition: $transition;
        }
    }
}

Answer 2

实际上，这将是另一种方式：

element:focus{
    &::-webkit-input-placeholder,
    &:-moz-placeholder,
    &::-moz-placeholder,
    &:-ms-input-placeholder{
        opacity: 0;
    }
}

修改

我在测试中将它们组合起来似乎有问题，但以下情况应该有效：

::-webkit-input-placeholder{
   color: red;
   &:focus{
        color: blue;
   }
}

但值得注意的是，只有当它们被分开时才会起作用。您不能将多个伪选择器组合到一个定义（如::-webkit-input-placeholder, :-moz-input-placeholder{ /* this does not work in my testing */ }）。

更新2

这是一个快速的SASS功能，我模拟了这将简化过程：

@mixin input-placeholder($all:default){
    @if $all == default {
        $all : ("::-webkit-input-placeholder", ":-moz-placeholder","::-moz-placeholder",":-ms-input-placeholder");
    }
    @each $placeholder in $all {
        #{unquote($placeholder)}{
            @content;
        }
    }
}

您可以通过执行以下操作来使用它：

@include input-placeholder{
    color: red;
    &:focus {
       color: blue;
    }
}

这意味着您只需编写一次代码即可。它将在各行上输出所有这些并对它们应用相同的规则。

Answer 3

SASS Compass解决方案：

// Style the html5 input placeholder in browsers that support it.
//
// The styles for the input placeholder are passed as mixin content
// and the selector comes from the mixin's context.
//
// For example:
//
//     #{elements-of-type(text-input)} {
//       @include input-placeholder {
//         color: #bfbfbf;
//         font-style: italic;
//       }
//     }
//
// if you want to apply the placeholder styles to all elements supporting
// the `input-placeholder` pseudo class (beware of performance impacts):
//
//     * {
//       @include input-placeholder {
//         color: #bfbfbf;
//         font-style: italic;
//       }
//     }
@mixin input-placeholder {
  @include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
    @if $current-prefix == -webkit {
      &::-webkit-input-placeholder { @content; }
    }
    @elseif $current-prefix == -moz {
      // for Firefox 19 and below
      @if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
        &:-moz-placeholder { @content; }
      }
      // for Firefox 20 and above
      &::-moz-placeholder { @content; }
    }
    @elseif $current-prefix == -ms {
      &:-ms-input-placeholder { @content; }
    }
  }
  // This is not standardized yet so no official selector is generated.
}

样式输入占位符与Sass用于聚焦字段

修改

3 个答案:

修改

更新2