Как добавить статический текст внутри формы ввода

Как я могу поместить этот статический текст в форму ввода? Это там все время.

Это мой код:

<label for="subdomain">Subdomain:</label>
5 ответов

<label for="subdomain">Subdomain:</label>

CSS

input[type="text"]#subdomaintwo{
 -webkit-appearance:none!important;
 color:red;
 text-align:right;
 width:75px;
 border:1px solid gray;
 border-left:0px;
 margin:0 0 0 -7px;
 background:white;
}
input[type="text"]#subdomain{
 -webkit-appearance:none!important;
 border:1px solid gray;
 border-right:0px;
 outline:none;
}

JS Fiddle для этого


Вы можете достичь этого с помощью следующего подхода:

  • поместите в с position:relative
  • введите an ::after псевдоэлемента с position:absolute
  • установить box-sizing в border-box
  • дайте padding-right равный ширине ::after псевдоэлемента

Рабочий пример:

label, input {
position: relative;
display: block;
padding-right: 76px;
width: 170px;
box-sizing: border-box;
}

label::after {
content: '.' attr(data-domain);
position: absolute;
top: 4px;
left: 94px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
display: block;
color: rgba(0, 0, 0, 0.6);
font-weight: bold;
}


Как насчет обертывания вашего input внутри div (позвольте ему называть его div.wrapper для удобства), а затем вы можете добавить текст в div.wrapper с ".domain.com", выровненный вправо? Например, например:

<p>.domain.com</p>

Вы можете создать свой div, чтобы он выглядел как ваш вход, и убедитесь, что фактический вход не имеет границы и т.д., Поэтому он не отличается от div.wrapper.

Немного взлома, но почему бы и нет?


Необходимо использовать свойство Readonly:

<label for="subdomain">Subdomain:</label>

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


Я не уверен, что это можно сделать, используя только одну форму ввода.

Возможно, что вы видите там не одну форму ввода, а форму ввода рядом со статическим текстом.

Поэтому моя идея состоит в том, чтобы поместить входную форму (где пользователь может писать), за которой следует статический текст (.domain.com). Затем вы можете поместить их внутри контейнера и создать контейнер, чтобы он выглядел как форма ввода.

Это сделает трюк.

licensed under cc by-sa 3.0 with attribution.