CSS占位符属性：如何在Chrome中设置它的宽度答案

【问题标题】：CSS placeholder attribute: How to set it's width in ChromeCSS占位符属性：如何在Chrome中设置它的宽度
【发布时间】：2017-10-04 12:37:43
【问题描述】：

https://codepen.io/stoplion/pen/bWoPLP

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

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

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

编辑检查 shadow dom 元素.. input::-webkit-input-placeholder 似乎得到了 display: block !important;

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

【问题讨论】：

这是你想要的：只为占位符文本提供背景色，而不是整个输入？是 X-Y 问题 (xyproblem.info) 吗？因为它带来的用户体验对我来说似乎不合适。如果这确实是您想要的，JavaScript 解决方案是否可以接受？

标签： css google-chrome placeholder

【解决方案1】：

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

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

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

【讨论】：

不，我是说背景。背景就像一个显示块元素，我希望它像内联显示一样工作。伪元素正在添加一个display: block。如果你在开发工具中查看shadow dom，你可以看到。

【解决方案2】：

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

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

【讨论】：

奇怪的是，这只有在我先将其更改为 label > input { 然后 label + input { 时才在 codepen 中有效。
我也注意到了。似乎在第一次加载时不起作用。