Есть ли простой способ сделать текстовую область html и текст ввода одинаково широкими? - PullRequest
Новая
       21

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

18 голосов
/ 26 августа 2008

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

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

Спасибо / Erik

Ответы [ 12 ]

13 голосов
/ 26 августа 2008

Вы должны быть в состоянии использовать 

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>
5 голосов
/ 28 августа 2008

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

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

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

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

4 голосов
/ 26 августа 2008

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

input[type=text], textarea { width: 80%; }
3 голосов
/ 26 августа 2008

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

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

2 голосов
/ 11 июня 2014

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

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
1 голос
/ 26 августа 2008

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

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

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

0 голосов
/ 12 мая 2018

В наши дни, если вы используете начальную загрузку, просто присвойте своим полям ввода класс 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>
0 голосов
/ 24 июля 2014 
input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
0 голосов
/ 23 июля 2013

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

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

HTML: 

<input class="mywidth" >
<textarea></textarea>
0 голосов
/ 03 октября 2008

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...