Сведения о вопросе

Oleksandrop

03:16, 13th August, 2020

Теги

html   css   textarea    

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

Просмотров: 468   Ответов: 12

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

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

Спасибо /Erik



  Сведения об ответе

SEEYOU

15:09, 19th August, 2020

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

.mywidth {

  width: 100px;   

}
<input class="mywidth">

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


  Сведения об ответе

DAAA

23:12, 11th August, 2020

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

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

.mywidth {

  width: 35em;

  font-family: Verdana;

  font-size: 1em;

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

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

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


  Сведения об ответе

LAST

06:44, 29th August, 2020

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

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


  Сведения об ответе

JUST___

10:14, 26th August, 2020

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

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


  Сведения об ответе

dump

21:56, 27th August, 2020

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

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


  Сведения об ответе

VERSUION

11:35, 17th August, 2020

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

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

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


  Сведения об ответе

lourence

22:48, 22nd August, 2020

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

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


  Сведения об ответе

SSESION

01:09, 7th August, 2020

Используйте класс CSS для width, а затем поместите свои элементы в HTML DIVs, DIVs с указанным классом.

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


  Сведения об ответе

padenie

06:01, 2nd August, 2020

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


  Сведения об ответе

VERSUION

01:04, 20th August, 2020 

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


  Сведения об ответе

VCe znayu

22:12, 16th August, 2020

В наши дни, если вы используете 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>


  Сведения об ответе

dumai

07:11, 29th August, 2020

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

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

HTML: 

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


Ответить на вопрос

Чтобы ответить на вопрос вам нужно войти в систему или зарегистрироваться