Как изменить стиль textarea

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

1. Изображение в качестве фона, которое пропадает при вводе текста.

Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.

textarea {
	background	: url(images/benice.png) center center no-repeat;
	border		: 1px solid #888;
}

Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:

$('textarea')
	.focus(function() { 
		$(this).css("background", "none"); 
	})
	.blur(function() { 
		if ($(this)[0].value == '') { 
			$(this).css("background", "url(images/benice.png) center center no-repeat"); 
		} 
	});

2. Placeholder в HTML5

В HTML5 появился новый атрибут, называемый placeholder. Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery

Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:

function elementSupportsAttribute(element, attribute) {
	var test = document.createElement(element);
	return (attribute in test);
};

Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder.

if (!elementSupportsAttribute('textarea', 'placeholder')) {
	// Если браузер не поддерживает атрибут, то выполняется код jQuery
	$("#example-three")
		.data("originalText", $("#example-three").text())
		.css("color", "#999")
		.focus(function() {
		var $el = $(this);
		if (this.value == $el.data("originalText")) {
			this.value = "";
		}
	})
	.blur(function() {
		if (this.value == "") {
			this.value = $(this).data("originalText");
		}
	});
} else {
	// Если же браузер поддерживает HTML5, то просто используем эту возможность
	$("#example-three")
		.attr("placeholder", $("#example-three").text())
		.text("");
}

4. Удаляем обводку textarea

Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea, когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance, либо можно просто установить элементу бордер или фон.

textarea {
	outline: none;
	-moz-appearance: none;
	border: 1px solid #999; /* указание этого свойства также удалит обводку в FireFox */
}

5. Запрет изменения размера

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

textarea {
	resize: none;
}

6. Добавление возможности изменения размера

jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:

$("textarea").resizable();

7. Изменение размера под содержимое

James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот. Плагин содержит много настроек, но самый простой способ его использовать это:

$('textarea').autoResize();

8. Nowrap

Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space, которое не работает с textarea. Для textarea необходимо использовать атрибут wrap.

<textarea wrap="off" cols="30" rows="5"></textarea>

9. Удаляем скролл-бары в IE

IE показывает вертикальный скролл-бар для всех textarea. Вы можете их спрятать используя overflow: hidden, но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:

textarea {
	overflow: auto;
}

В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.

Примеры к статье вы можете посмотреть здесь.

Styling a <textarea> is not the same as styling an HTML <input> because both have different types of usages. We use <textarea> when we need to write multiple lines of text.

That’s why sometimes it seems difficult to style a <textarea> and also does not match with other <input> boxes. Textarea also has some extra things to handle and customize like, scrollbar, font, and placeholder, we can resize the textarea, etc.

In this article, you will learn how you can style HTML <textarea> very easily. You will get detailed information about this topic.

How to Style Textarea Placeholder

You can use many attributes with this <textarea> tag. For example, title, cols, rows, wrap, etc. You will find a list of attributes that <textarea> accepts at the end of this article.

In order to, add a placeholder like any other <input> tag you have to use placeholder attribute in <textarea>.

          <textarea placeholder="Enter your message..." cols="25" rows="5"></textarea>
        

To add style to the placeholder in <textarea> you can use the following code. We select ::placeholder in the CSS file to add any style to the placeholder.

          /* Modern Browsers */
textarea::placeholder {
    font-size: 1rem;
    color: #9c9c9c;
    font-family: 'Roboto', sans-serif;
}

/* WebKit, Edge */
textarea::-webkit-input-placeholder {
    font-size: 1rem;
    color: #9c9c9c;
    font-family: 'Roboto', sans-serif;
}

/* Firefox 4-18 */
textarea:-moz-placeholder {
    font-size: 1rem;
    color: #9c9c9c;
    font-family: 'Roboto', sans-serif;
}

/* Firefox 19+ */
textarea::-moz-placeholder {
    font-size: 1rem;
    color: #9c9c9c;
    font-family: 'Roboto', sans-serif;
}

/* IE 10-11 */
textarea:-ms-input-placeholder {
    font-size: 1rem;
    color: #9c9c9c;
    font-family: 'Roboto', sans-serif;
}

/* Edge */
textarea::-ms-input-placeholder {
    font-size: 1rem;
    color: #9c9c9c;
    font-family: 'Roboto', sans-serif;
}
        

Most of the modern browsers support just ::placehoder but to support other browsers we can use other versions like, -ms-, -moz-, -webkit- etc.

In the demo, I have used font-size, color, and font-family but you can use any CSS style you want. From now on you can customize your textarea placeholder according to your need.

Also Read: Async VS Defer — When & How to Use Async Defer in HTML Script Tag

You can style text inside textarea similarly as you can do with any other HTML inputs. You can also use any CSS property like font-size, font-family, color, etc.

To add the fonts to your website Google Fonts would be a great choice because they provide a lot of options and this is absolutely free. When someone writes text inside <textarea> then the text will use that font.

          textarea {
    font-size: 1rem;
    line-height: 1.5em;
    font-family: 'Roboto';
}
        

How to Add Default Text in Textarea

You can add default text in your <textarea> input. This text will be shown automatically inside textarea input box. Users can change that or completely replace it with their own text.

This is especially helpful if users have to write a similar type of text all the time. In this case, you can set a default text and users will edit the default text. It will save them time.

To add default text in textarea input you just have to place your text in between the opening tag <textarea> and closing </textarea>. It is done.

          <textarea>This is the default text. User will see this text automatically.</textarea>
        

Remove Resize Handler in Textarea

By default, browsers add resize handler in <textarea> to the bottom right corner. You can click and drag to increase or decrease the size of the textarea input.

If you don’t need this feature, you can disable this with just one line of CSS.

          textarea {
    resize: none;
}
        

How to Resize Textarea Vertically

If you don’t want to remove the resize handler completely then you have other options as well. You can allow your users to resize the <textarea> vertically.

If you add the following CSS property then users will be able to resize your textarea only vertically.

          textarea {
    resize: vertical;
}
        

How to Resize Textarea Horizontally

On the other hand, if you don’t want to change the size of your <textarea> vertically but horizontally, you can do that too.

Following CSS property will make your textarea horizontally resizable.

          textarea {
    resize: horizontal;
}
        

How to Remove The Glow Around Textarea

In most browsers, when you focus or write inside the <textarea> a glow or border appears. Some people like it but some don’t.

If this glow border does not fit with your design and you want to remove it, you can do that.

          textarea {
    outline: none;
}
        

You can also apply this style using :focus pseudo-class as well both work the same.

          textarea:focus {
    outline: none;
}
        

Textarea Nowrap

Normally we use white-space: nowrap; to prevent text from wrapping. In this way, you can write in an input box as long as you want without any line breaks. The browser will show a horizontal scrollbar.

You can customize this default scrollbar if you want. I will show you how you can style textarea scrollbar in the next sections.

When you press Enter, you move to the next line. But this CSS property does not work with <textarea>. To get a similar result, you have to use the wrap="off" attribute in your <textarea> input.

          <textarea wrap='off' placeholder='Enter your message...'></textarea>
        

How to Make Textarea Responsive

You can make the <textarea> responsive in many ways. As you have seen, you can control resize handler in textarea.

You can also apply width, height, min-width, max-width, min-height and max-height properties to make it responsive.

          textarea {
    width: 100%;
    max-width: 900px;
}
        

In the above code, we have set width: 100%; so by default textarea will take the full area. But max-width: 900px; means textarea will not be bigger than 900px.

If screen size increases, textarea size will increase up to 900px not more than that. It is also helpful if you set resize: horizontal;.

Users can resize textarea input but when you set max-width: 900px; users will be able to increase the textarea up to 900px. You can also set min-width if you want. Then users will not be able to decrease the size more than that.

          textarea {
    height: 300px;
    min-height: 200px;
    max-height: 500px;
}
        

It also works a similar way when you use the height property. Here default height of the <textarea> will be 300px.

But when you set resize: vertical; then users will be able to increase its height up to 500px and decrease its height up to 200px.

How to Style Scrollbar in Textarea

When we add height to the <textarea> and users write multiple lines of text then the browser shows a default scrollbar. Scrollbar may come horizontally and vertically.

If you don’t like the default look of those, you can style them according to your need. You can change their color, width, background, etc. And you don’t have to do this separately. You can customize both of them at the same time.

          textarea::-webkit-scrollbar {
    width: 15px;
    background-color: #f5f5f5;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}

textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #249de4;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
        

This will add a custom scrollbar to your <textarea> input on both sides. Here, textarea::-webkit-scrollbar will style the background of the scrollbar and textarea::-webkit-scrollbar-thumb will style the scrollbar thumb, the part that moves.

But the above code will not work on the Firefox browser. Don’t worry you have another option.

          textarea {
    scrollbar-width: thin;
    scrollbar-color: #249de4 #f5f5f5;
}
        

You should add this code along with the above code then users will be able to see a custom scrollbar in both Chrome and Firefox browsers.

Firefox does not provide much customization options as Chrome does. You can not set a custom width for the scrollbar. The property scrollbar-width accepts only 3 values auto, thin, and none.

Here, auto is the default value and none will remove your scrollbar in the Firefox browser. This is also an experimental technology. So I would suggest you not use this part on your main website.

If you want to know more about scrollbars, you can follow our ultimate guide on scrollbar customization.

Also read: Ultimate Guide to Create Custom Scrollbars in CSS

But you can use 1^st part textarea::-webkit-scrollbar and textarea::-webkit-scrollbar-thumb, this will work just fine.

Internet Explorer adds a vertical scrollbar by default in the textarea even if there is no text in it. It does not look good.

You can hide the default scrollbar using overflow: hidden; property. But the problem is you don’t get any scrollbar at all when a user writes multiple lines of text. So, it is not an ideal solution.

Therefore, we should use overflow: auto; this to remove the default scrollbar and it appears when needed.

          textarea {
    overflow: auto;
}
        

All HTML Textarea Attributes

Here is the list of attributes that you can use in the HTML <textarea> tag.

Тег <textarea> используется для определения области, где пользователь может вводить многострочный текст. В отличие от тега <input>, где перенос строки в текстовом поле невозможен, в теге <textarea> допускаются переносы, они сохраняются при отправке данных на сервер.

Между открывающим <textarea> и закрывающим </textarea> тегами можно поместить любой текст, который будет отображаться моноширинным начертанием. В текстовое поле можно вводить любое количество символов.

Содержимое элемента заключается между открывающим (<textarea>) и закрывающим (</textarea>) тегами.

Для определения размера текстового поля можно использовать атрибуты cols и rows, или же использовать CSS свойстваheight
и width. А с помощью CSS свойства resize можно запретить изменение размера текстового поля.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form> 
      <textarea name="comment" rows="12" cols="35">Написать комментарий автору.</textarea><br>
      <input type="submit" name="submitInfo" value="Отправить">
    </form>
  </body>
</html>

Результат

В этом примере мы определили текстовую область тегом <textarea>, присвоили ей имя “comment”, использовав атрибут name; задали высоту строк (12 символов) атрибутом rows и указали ширину поля атрибутом cols (35 символов). Мы также разместили внутри формы кнопку, при нажатии на которую введенная информация отправляется на сервер.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .comment {
        width: 60%;
        height: 100px;
        padding: 10px;
        outline: 0;
        border: 3px solid #1c87c9;
        background: #d0e2bc;
        line-height: 20px;
      }
    </style>
  </head>
  <body>
    <form>
      <p>Пример с использованием CSS стилей</p>
      <textarea class="comment"> Написать комментарий автору.</textarea>
      <br>
      <input type="submit" name="submitInfo" value="Отправить">
    </form>
  </body>
</html>

Результат

В этом примере мы использовали CSS стили для визуального оформления текстового поля.

Тег <textarea> поддерживает также глобальные атрибуты и атрибуты событий.