Question

当我开始输入文字时，我得到一个扩展的文本字段，并且表示它没有，因为它有文本 - 否则它是红色的，表示它还没有填写。我需要在所有状态下对此进行左边填充，但是当我写入太多文本并且文本开始滚动时，将忽略填充。有没有什么办法解决这一问题？我做了一个小提琴：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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

编辑：以下内容旨在向您显示溢出时padding未被覆盖。发生的事情是填充增加了元素的宽度，背景图像就是 - 背景。要解决此问题，您可以使用psuedo元素来允许该背景图像覆盖文本。文本仍然存在，但它位于图像下方。

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

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

但是，你可以使用psuedo元素。

jsfiddle

我已在Photoshop中编辑图像以获得透明背景，然后转换为base64网址（因此我无需托管图像）。

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

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

溢出时覆盖左边的填充？

2 个答案: