CSS占位符属性：如何设置它'；铬的s宽度

我尝试了很多方法使占位符的背景看起来不像显示块（将其位置设置为绝对，将其宽度设置为绝对），但似乎没有任何效果

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

@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输入占位符

显示一个

display:block！重要的

更好的问题是。。
如何将
-webkit输入占位符
更改为内联元素？
删除
转换：translateX（-9px）行使输入文本和背景行与光标齐平

@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;
  }
}


删除填充也可以根据需要删除空白。
增加您的特异性。尝试
标签+输入{

不，我指的是背景。背景就像一个显示块元素，我希望它像一个显示内联元素一样工作。伪元素得到了一个
display:block
添加到它。你可以看到，如果你在开发工具中查看阴影dom。奇怪的是，如果我首先将其更改为
label>inpu，这只在codepen中起作用t{
然后
标签+输入{
。我也注意到了。在第一次加载时似乎不起作用。这就是你想要的：只为占位符文本提供背景色，而不是整个输入？这是X-Y问题吗（）？因为它带来的用户体验在我看来并不合适。如果这真的是你想要的，JavaScript解决方案可以接受吗？