溢出时左侧填充被覆盖？

Question

溢出时左侧填充被覆盖？

3

我有一个文本框，当我开始输入文本时，它会展开，这表明它已经填写了文本，因此是OK的 - 否则它将变为红色，表示它还没有被填写。我需要在所有状态下都有左侧间距，但当我写太多文本并且文本开始滚动时，间距被忽略了。有没有办法解决这个问题？我做了一个演示：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;
}

左侧留白是因为在该区域还有一个复选框，它可以代替文本框使用，且外观完全相同。因此，您可以填写信息或选择左侧的复选框。

- Streching my competence

使用可编辑的 div 而不是 input 的原因是什么？ - Gacci

2个回答

2

编辑：下面的内容旨在向您展示 padding 未在溢出时被覆盖。实际上，padding会增加元素的宽度，而背景图片就是一个背景。为了解决这个问题，您可以使用伪元素来允许该背景图像覆盖文本。文本仍然存在，但它在图像下面。

如果我是你，我会查看有关bootstrap输入组的以下教程。这可能对您有所帮助，以了解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;
}

- Raphael Rafatpanah

刚刚测试了你的解决方案（在fiddle上）-想让你知道当你添加一些文本然后删除它时，它会出现错误。 - chazsolo

@chazsolo。已更新。 - Raphael Rafatpanah

固定位置相对于视口，将输入框放入实际页面会变得复杂，而且可能无法与多个输入一起使用。 - Stickers

不错的解决方案！ - 你们俩都做得很好。非常感谢你们的时间！ - Streching my competence

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stickers · Accepted Answer

一种方法是使勾号图标具有相同的白色背景颜色，以便它覆盖左侧任何溢出的文本。我也显著缩小了样式代码的大小。

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://istack.dev59.com/A45oq.webp) 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>