Как сделать, чтобы <input type="text">
выглядел как обычный текст, и только при получении фокуса или наведении мыши становился как <input>
?
Возможно ли, чтобы и ширина поля изменялась в соответствие с длиной введённой строки?
Как сделать, чтобы <input type="text">
выглядел как обычный текст, и только при получении фокуса или наведении мыши становился как <input>
?
Возможно ли, чтобы и ширина поля изменялась в соответствие с длиной введённой строки?
Если я вас правильно понял, то вам нужно поле, подобное тому, как-будто мы пишем текст на обычной бумаге. Если так, то это можно реализовать таким образом:
h3 {
text-align: center;
}
p.with-fields {
/* Чтобы поясняющий текст не наезжал на следующую строку */
line-height: 2.1em;
text-align: justify;
}
/* Бокс-wrapper */
[data-hint] {
/* Чтобы спозиционировать относительно данного элемента бокс поясняющего текста */
position: relative;
}
/* Бокс поясняющего текста */
[data-hint]::after {
/* Получаем контент из атрибута «data-hint» */
content: attr( data-hint);
font-size: .6em;
position: absolute;
bottom: -2.6em;
/* Устанавливаем ширину равной ширине <input> */
width: 100%;
/* Сдвигаем бокс до конца влево, чтобы он совпал с <input> */
left: 0;
text-align: center;
}
input.as-text {
/* Наследуем фон, так как он по умолчанию белый */
background: inherit;
border: 0;
border-bottom: 1px solid;
/* Наследуем характеристикИ шрифта, так как он по умолчанию специфичный */
font: inherit;
/* Сбрасываем высоту строки, так как она унаследовалась вместе со шрифтом от «p.with-fields» */
line-height: normal;
/* Убираем рамку, которая добавляется при фокусе на элементе */
outline: 0;
padding: 0;
text-align: center;
}
input.as-text.full-name {
width: 15em;
}
input.as-text.date {
width: 7em;
}
p.with-fields.signature {
text-align: right;
}
input.as-text.signature {
width: 7em;
}
<h3>Объяснительная</h3>
<p class="with-fields">
Я,
<span data-hint="ФИО">
<input class="as-text full-name">
</span>,
<span data-hint="Дата">
<input class="as-text date">
</span>
был замечен курящим за углом школы во время занятий.
</p>
<p class="with-fields signature">
<span data-hint="Подпись">
<input class="as-text signature">
</span>
</p>
:hover
; например, в следующем примере при наведении курсора на поле изменяется цвет нижней границы: jsfiddle.net/yh2c6860. Также по умолчанию изменяется курсор на тип text
...
Commented
7 июл. 2016 в 20:03
Проще всего это сделать при помощи псевдо-класса :not()
:
input[type=text]:not(:focus) {
border: 0;
}
<input type="text" value="Text Text Text">
Если же нужно чтобы поле ввода отображалось и при наведении курсора мыши, то CSS-селектор становится немного посложнее:
input[type=text]:not(:focus):not(:hover) {
border: 0;
}
<input type="text" value="Text Text Text">
Изменил и дополнил ответ @kff, вот что получилось:
input[type=text]{
font: inherit;
padding: inherit;
margin-left: -2px; /* компенсировать border, раздвигающий текст */
width:auto; /* не работает */
display: inline; /* тоже */
}
input[type=text]:not(:focus):not(:hover) {
border-color: transparent;
color: inherit;
background: inherit;
}
Text--<input type="text" value="--Text-Text-Text--">--Text
Без javascript видимо изменить ширину поля ввода под размер текста невозможно. Ниже вариант с javascript.
function adjustsize(inp) {
var tmp=document.createElement("span");;
for(var i=0, l=inp.attributes.length; i < l; ++i){
var nodeName = inp.attributes.item(i).nodeName;
var nodeValue = inp.attributes.item(i).nodeValue;
tmp.setAttribute(nodeName, nodeValue);
}
tmp.innerHTML=inp.value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
tmp.classList.add("tmp");
tmp.style.width="auto";
inp.parentNode.insertBefore(tmp, inp);
inp.style.width=tmp.getBoundingClientRect().width+"px";
inp.parentNode.removeChild(tmp);
}
input[type=text]{
font: inherit;
padding: inherit;
margin-left: -2px; /* компенсировать border, раздвигающий текст */
margin-right: -2px;
}
input[type=text]:not(:focus):not(:hover) {
border-color: transparent;
color: inherit;
background: inherit;
}
.tmp {
visibility: hidden;
white-space: pre;
position: absolute;
}
Text--<input type="text" value="--Text-Text-Text--" onchange=adjustsize(this) class=kgb>--Text
Код заимствован и доработан. Размер меняется только после редактирования, но это потом можно доделать.
input
'а по размеру текста. Похоже, без JS не обойтись. Но можно вместо input
исрользовать div
или span
с атрибутом contenteditable="true"
. htmlbook.ru/html/attr/contenteditable, ru.stackoverflow.com/q/498435/194374.
input[type=text]{border:none; background: transparent;}
input[type=text]:focus, input[type=text]:active{border:1px solid #fff; background: #fff;}
input {
border:none;
background:none;
}
input:focus, input:hover {
border:1px solid #A9A9A9;
background:white;
}
<input/>