Question

我尝试过多种方法让这个占位符的背景看起来不像一个显示块（将它的位置设置为绝对，设置它的宽度）但似乎没有任何效果。

知道如何让背景“拥抱”文本，就像在内联元素中一样吗？

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}


input {
  padding: 10px;
  width: 400px;
}

input {
  @include placeholder {
    transform: translateX(-9px);
    background-color: rgba(29, 146, 237, 0.15);
    padding: 5px 5px;
    color: #333;
    float: left;
    width: 20px;
  }
}

修改的检查阴影dom元素.. input::-webkit-input-placeholder似乎得到display: block !important;

更好的问题是...... 如何将-webkit-input-placeholder更改为内联元素？

Answer 1

删除transform: translateX(-9px);行会使输入文本和背景行与光标齐平。

https://codepen.io/anon/pen/oWGrad

删除填充也可以根据需要取出空格。

Answer 2

提高你的特异性。试试label + input {

https://codepen.io/anon/pen/JNrgjZ

CSS占位符属性：如何在Chrome

2 个答案: