Есть ли простой способ сделать html textarea и текст типа ввода одинаково широким?

Есть ли простой способ получить текстовое поле HTML и тип ввода = "текст" для рендеринга с (приблизительно) равной шириной (в пикселях), который работает в разных браузерах?

Решение CSS/HTML было бы блестящим. Я бы предпочел не использовать Javascript.

Спасибо /Эрик

Ответ 1

Вы должны иметь возможность использовать

.mywidth {
  width: 100px;   
}

<input class="mywidth">
<textarea class="mywidth"></textarea>

Ответ 2

Чтобы ответить на первый вопрос (хотя он был дан в ответ на смерть): ширина CSS - это то, что вам нужно.

Но я хотел ответить на вопрос Gaius в ответах. Гай, ты проблема в том, что вы устанавливаете ширину в em. Это хорошая идея, но вам нужно помнить, что em основаны на размере шрифта. По умолчанию область ввода и текстовое поле имеют разные грани и размеры шрифта. Поэтому, когда вы устанавливаете ширину до 35 мкм, область ввода использует ширину шрифта, а текстовое поле использует ширину шрифта. Размер шрифта текстовой области меньше, поэтому текстовое поле меньше. Либо установите ширину в пикселях или точках, либо убедитесь, что поля ввода и текстовые поля имеют одинаковый шрифт и размер шрифта:

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}

<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

Ответ 3

Кто-то еще упомянул об этом, а затем удалил его. Если вы хотите стилизовать все текстовые поля и текстовые входы таким же образом без классов, используйте следующий CSS (не работает в IE6):

input[type=text], textarea { width: 80%; }

Ответ 4

Это вопрос CSS: ширина включает ширину границы и ширины заполнения, которые имеют разные значения по умолчанию для INPUT и TEXTAREA в разных браузерах, поэтому сделайте их одинаковыми:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>

Это описано в разделе Размер габаритов в спецификации CSS, в котором говорится:

Ширина окна задается суммой левого и правого полей, границы и отступов и ширины содержимого.

Ответ 5

Используйте CSS3, чтобы сделать текстовое поле и входные данные одинаковыми. См. jsFiddle.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Ответ 6

Да, есть. Попробуйте сделать что-то вроде этого:

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

Оба должны равняться одному размеру. Вы можете сделать это с абсолютными размерами (px), относительными размерами (em) или процентами.

Ответ 7

Просто примечание - на ширину всегда влияет что-то, происходящее на стороне клиента - PHP не может влиять на такие вещи.

Настройка общего класса в элементах и установка ширины в CSS - это ваша самая чистая ставка.

Ответ 8

Используйте класс CSS для ширины, затем поместите свои элементы в HTML DIV, DIV, имеющие упомянутый класс.

Таким образом, управление компоновкой в целом должно быть лучше.

Ответ 9

Как указано в Неравномерном текстовом поле HTML и ширине раскрывающегося списка с XHTML 1.0 строго, это также зависит от вашего doctype. Я заметил, что при использовании XHTML 1.0 strict разница в ширине действительно появляется.

Ответ 10

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

Ответ 11

вы также можете использовать следующие CSS:

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML:

<input class="mywidth" >
<textarea></textarea>