左填充在溢出时被覆盖？

Question

我有一个文本字段，当我开始输入文本时它会展开，并表明它是好的，因为它有文本 - 否则它是红色的，表明它还没有被填写。在所有状态下我都需要左填充，但是当我写太多文本并且文本开始滚动时，填充将被忽略。有没有什么办法解决这一问题？我做了一个fiddle：https://jsfiddle.net/o1r9dp2L/1/

<div class="container"><div contentEditable=true id="test" spellcheck="false" onkeyup="this.setAttribute('value', this.value);"  onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="Placeholder"></div></div>

CSS:

.container{
    overflow: hidden;
margin:0px;
height:24px;
}

#test:not([value=""])  {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:0px;
padding-left:36px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
/*background-repeat: repeat-x 100% 100%;*/
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#000;
outline:0;
}


#test {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}

#test:empty {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}

字段左侧有空白 space 的原因是我在那里也有一个复选框可以代替使用，它会扩展以覆盖文本字段并且看起来完全一样。因此，您要么填写信息，要么选中左侧的框。

Answer 1

编辑： 以下内容旨在向您展示 padding 未在溢出时被覆盖。发生的事情是填充增加了元素的宽度，而背景图像就是背景。要解决这个问题，您可以使用 psuedo 元素让背景图像覆盖文本。文字还在，但在图片下面。

如果我是你，我会在 bootstrap's input groups 上查看以下教程。了解 bootstrap 是如何做到这一点的可能会对您有所帮助。然后，您可以使用 JavaScript 根据输入的状态更改图像或 HTML 结构。

问题是复选标记图像被用作 div 中的背景图像。没有办法让背景图片覆盖文本。

但是，您可以为此使用伪元素。

jsfiddle

我已经在 Photoshop 中将图像编辑为具有透明背景，然后转换为 base64 URL（因此我不必托管图像）。

伪元素使用两个背景图像，绿色复选标记下方的红色背景。这个伪元素是绝对定位的，因此根据需要覆盖文本。

#test:not([value=""]):before {
  content: '';
  position: fixed;
  top: 13px;
  left: 9px;
  display: inline-block;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAABvElEQVQ4jZ2UQUgbQRSGPxMkG1QapaKVXAwVFCQKkqCIi4cGPEixWBFEpELAUqQX9VDEXFQQcUEkekoPxVNBsZQiSopQzUENoqJFxNaStBAPqe7FuBDDeBKiZKPsD+8w88//zYM3TA46EkLoWXcU2Z3vf//nV08QyTVT92FQ96AQ4uGKLne8XPRtWxd9Qv5x+lsIgelRbWRS6q9jfm9TDoILUy0zjeVdgHHg2c6X7r4k/SAx6Xw1UmNmyzjwcrdB+RcvB3AWtsW8DpRbyxBwf2elfRbewHMm3VW9ElwZB6phORDX7ACt9paQnMdquq0PTCUtqnpVpKWwpm9HjkKej9CJqZJBZ/Hw/Zgu0L88NlW2NvG/NrhxEUlRAYB24ArE1CKAbnvrV7fE+qOBTU9sagkQTXy39KyfrGhgVQ9DHgXeYarEW12gZMrpAmvktxOfCyUFIHyx4PAfxxIb8bNxAE9JczhTd1mBYL10y17lkwU/aPh+BhhKAJTirXo2rZfKPmVzcayj7sW31xCEa6IA+fV4bCwZAwKUNq2O2p+GbpcDZdVz6e/uvnL0jLu/TdKiqVqeZpawFeSeZ7v/BqqSqeSPBBXnAAAAAElFTkSuQmCC'), url(http://i65.tinypic.com/1z3xah4.png);
  background-repeat: no-repeat, repeat-x;
  height: 15px;
  width: 25px;
}

我还删除了背景图片的另一个实例。

~~background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;~~

更新：

为了处理随后清除文本的情况，我添加了以下内容：

#test:empty:before {
  content: '';
  background-image: none;
  width: 0;
  position: static;
}

Answer 2

一种方法是使勾选图标具有相同的白色背景颜色，以便覆盖左侧溢出的所有文本。我还显着减少了样式代码的大小。

jsFiddle

body {
  background: #fff;
}
.container {
  position: relative;
  margin: 20px 0;
}
.input {
  cursor: text;
  width: 100px;
  display: inline-block;
  vertical-align: top;
  overflow: auto;
  font-family: Quicksand, sans-serif;
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
  outline: 0;
  border-radius: 3px;
  border: 1px solid #999;
  padding: 4px 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.input:not(:empty) {
  color: #000;
  width: 130px;
  right: 0;
  padding-left: 24px;
}
.input:not(:empty):before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 22px;
  border-radius: 3px;
  background: #fff url(https://i.stack.imgur.com/A45oq.png) center / 70% no-repeat;
}
.input:empty {
  background: pink;
  color: red;
  position: relative;
  right: -24px;
}
.input:empty:before {
  content: attr(data-placeholder);
}

<div class="container">
  <div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>

<div class="container">
  <div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>

左填充在溢出时被覆盖？

Left padding overwritten on overflow?

html

css

padding