html - 左填充在溢出时被覆盖？

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

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

Answer 1

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

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(/image/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>