Левое заполнение перезаписывается при переполнении?

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

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>

Answer 2

Редактировать: Это должно показать вам, что padding не переписывается при переполнении. Случается, что заполнение увеличивает ширину элемента, а фоновое изображение - это только фон. Чтобы обойти это, вы можете использовать элемент psuedo, чтобы позволить фоновому изображению проходить текст. Текст все еще присутствует, но находится под изображением.

Если бы я был вами, я бы изучил следующий учебник по bootstrap's input groups. Возможно, вам будет полезно посмотреть, как это происходит. Затем вы можете использовать JavaScript для изменения структуры изображения или HTML на основе состояния ввода.

---

Проблема заключается в том, что изображение было галочки используется в качестве фонового изображения внутри div. Невозможно сделать фоновое изображение переходящим текстом.

Однако для этого вы можете использовать элемент psuedo.

jsfiddle

Я редактировал изображение в Photoshop, чтобы иметь прозрачный фон, а затем преобразуется в base64 URL (так что я не должен разместить изображение).

Элемент psuedo использует два фоновых изображения, красноватый фон под зеленой галочкой. Этот элемент psuedo позиционируется абсолютно и поэтому идет над текст при желании.

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

Update:

Чтобы обработать случай, когда текст затем очищенную, я добавил следующее:

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