Создайте текстовое поле только для чтения, но без границы текстового поля

Question

Создайте текстовое поле только для чтения, но без границы текстового поля

Я пытаюсь создать текстовое поле, которое доступно только для чтения, но оно не должно выглядеть как текстовое поле.

Нормальное текстовое поле только для чтения -

Your name is [ SAM ]

Но я хочу, чтобы это было как

Your name is SAM

То есть он должен выглядеть как продолжение предложения и все еще может выступать в качестве текстового поля, на котором мы можем показать значение (здесь Сэм).
Как это можно сделать?

684 8

html css textfield

8 ответов:

Comments

Ничего не найдено.

Ruddy · Accepted Answer · 2013-12-29 14:52:59

То, что вы ищете, это:

HTML:
Your name is <input type="text" value="SAM" readonly="readonly" />
CSS:
input {
    border: 0;
}
Вы можете установить поле ввода в readonly в HTML, это сделает его так, что вы не сможете редактировать поле. Затем вы хотите избавиться от границы, чтобы она выглядела так, как будто она отделена от текста. Затем настройте его так, как считаете нужным.

ДЕМО ЗДЕСЬ

Обновление:

Если вход находится в div / span, вы можете только входы в пределах этого div/span как будто Итак:

HTML:
<span class="test">Your name is <input type="text" value="SAM" readonly="readonly" /></span>
CSS:
.test input {
    border: 0;
}
ДЕМО ЗДЕСЬ

semirturgay · Accepted Answer · 2017-04-14 13:29:00

Чтобы стилизовать все текстовые поля только для чтения, примените следующее правило CSS
input[readonly="readonly"] {
      border:0px;
}

Siamak A.Motlagh · Accepted Answer · 2013-12-29 14:45:15

Это можно сделать с помощью css. ЖИВАЯ ДЕМОНСТРАЦИЯ
<style>
*
{
    font-family: Tahoma;
    font-size: 13px;
}
input
{
    background-color:transparent;
    border:0px;
    padding:0px;
}
</style>
this is the <input type='text' value='textbox' readonly >

tewathia · Accepted Answer · 2013-12-29 14:47:26

Установите границу, контур и фон на none, и вы получите желаемый эффект.
input[disabled] {
    background:none;            
    border:none;
    outline:none;
}
По-прежнему будет использоваться минимальная ширина по умолчанию, поэтому вам, возможно, придется установить ширину на меньшее значение.

Демо

Sai Kiran Sripada · Accepted Answer · 2013-12-29 14:42:49

Добавьте это в свой CSS:
input[type="text"], input[type="text"]:focus { border: none; outline: 0; }

user1627363 · Accepted Answer · 2013-12-29 14:40:00

Да, почему бы вам не использовать CSS для этого?

Добавить:

input[type="text"] { border: none; }

Также опция: добавление фоновой транспарантности, как указано выше.

Saad Bhutto · Accepted Answer · 2013-12-29 14:44:48

<input type="text" value = "Your Name is SAM" readonly= "true" style ="border: none" name="name"/>

schnawel007 · Accepted Answer · 2013-12-29 14:45:43

Установите границу в 0px, а фон в прозрачный, это должно быть работой.

В файле CSS:
*
{
    font-size: 14px;
    font-family: Arial;
}
input[type="text"]
{
    border:0px solid red;
    background: none;
}
В HTML-файле:
Hello <input type="text" value="John">