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

StackOverflow https://stackoverflow.com/questions/28713

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

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

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>

Другие советы

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

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

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

Надеюсь, это поможет.

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

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

Это вопрос CSS:ширина включает ширину границы и отступа, которые имеют разные значения по умолчанию для ВВОДА и ТЕКСТОВОЙ области в разных браузерах, поэтому сделайте их одинаковыми:

<!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, в котором говорится:

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

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

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

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

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

Оба должны быть одинакового размера.Вы можете сделать это с помощью абсолютных размеров (px), относительных размеров (em) или процентных значений.

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

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

Используйте класс CSS для определения ширины, затем поместите свои элементы в HTML-DIVS, причем DIVS будут иметь указанный класс.

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

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

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

В наши дни, если вы используете bootstrap, просто укажите полям ввода следующее form-control класс.Что -то вроде:

<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">

<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>

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

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

HTML:

<input class="mywidth" >
<textarea></textarea>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top