Как изменить цвет textarea html

Тег

определяет поле для ввода многострочного текста. Описание тега, атрибуты, примеры.</div>
                        <div class="entry-meta">
                <span class="b-share b-share--small">

</span>            </div>
                    </header>

<div id="yandex_rtb_R-A-6935943-3" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-3",
                renderTo: "yandex_rtb_R-A-6935943-3",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>
<div>
<div>
<p>Тег <textarea>  используется для определения области, где пользователь  может вводить многострочный текст. В отличие от тега <input>, где перенос строки в текстовом поле невозможен, в теге <textarea> допускаются переносы, они сохраняются при отправке данных на сервер.</p>
<p>Между открывающим <textarea> и  закрывающим  </textarea> тегами можно поместить любой текст, который будет отображаться моноширинным начертанием. В текстовое поле можно вводить любое количество символов.</p>
<p>Содержимое элемента заключается между открывающим (<textarea>) и закрывающим (</textarea>) тегами.</p>
<p>Для определения размера текстового поля можно использовать атрибуты <span>cols</span> и <span>rows</span>, или же использовать CSS свойства<span>height</span><br />
 и <span>width</span>.  А с помощью CSS свойства <span>resize</span> можно запретить изменение размера текстового поля.</p>
<h3>Пример</h3>
<div>
<div>
<pre><code><span><!DOCTYPE <span>html</span>></span>
<span><<span>html</span>></span>
  <span><<span>head</span>></span>
    <span><<span>title</span>></span>Заголовок документа<span></<span>title</span>></span>
  <span></<span>head</span>></span>
  <span><<span>body</span>></span>
    <span><<span>form</span>></span> 
      <span><<span>textarea</span> <span>name</span>=<span>"comment"</span> <span>rows</span>=<span>"12"</span> <span>cols</span>=<span>"35"</span>></span>Написать комментарий автору.<span></<span>textarea</span>></span><span><<span>br</span>></span>
      <span><<span>input</span> <span>type</span>=<span>"submit"</span> <span>name</span>=<span>"submitInfo"</span> <span>value</span>=<span>"Отправить"</span>></span>
    <span></<span>form</span>></span>
  <span></<span>body</span>></span>
<span></<span>html</span>></span></code></pre>
</div></div>
<h3>Результат</h3>
<p><img fetchpriority="high" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20438%20302'%3E%3C/svg%3E" width="438" height="302" alt="textareaexample1" data-lazy-src="https://ru.w3docs.com/uploads/media/default/0001/02/905772c3f89cde8a93a2e0fae55f9f7f4cd3fed7.png" /><noscript><img fetchpriority="high" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://ru.w3docs.com/uploads/media/default/0001/02/905772c3f89cde8a93a2e0fae55f9f7f4cd3fed7.png" width="438" height="302" alt="textareaexample1" /></noscript></p>
<p>В этом примере мы определили текстовую область тегом <textarea>, присвоили ей имя “comment”, использовав атрибут <span>name</span>; задали высоту строк (12 символов) атрибутом <span>rows</span> и указали ширину поля атрибутом <span>cols</span> (35 символов). Мы также разместили внутри формы кнопку, при нажатии на которую введенная информация отправляется на сервер.</p>
<h3>Пример</h3>
<div>
<div>
<pre><code><span><!DOCTYPE <span>html</span>></span>
<span><<span>html</span>></span>
  <span><<span>head</span>></span>
    <span><<span>title</span>></span>Заголовок документа<span></<span>title</span>></span>
    <span><<span>style</span>></span><span>
      <span>.comment</span> {
        <span>width</span>: <span>60%</span>;
        <span>height</span>: <span>100px</span>;
        <span>padding</span>: <span>10px</span>;
        <span>outline</span>: <span>0</span>;
        <span>border</span>: <span>3px</span> solid <span>#1c87c9</span>;
        <span>background</span>: <span>#d0e2bc</span>;
        <span>line-height</span>: <span>20px</span>;
      }
    </span><span></<span>style</span>></span>
  <span></<span>head</span>></span>
  <span><<span>body</span>></span>
    <span><<span>form</span>></span>
      <span><<span>p</span>></span>Пример с использованием CSS стилей<span></<span>p</span>></span>
      <span><<span>textarea</span> <span>class</span>=<span>"comment"</span>></span> Написать комментарий автору.<span></<span>textarea</span>></span>
      <span><<span>br</span>></span>
      <span><<span>input</span> <span>type</span>=<span>"submit"</span> <span>name</span>=<span>"submitInfo"</span> <span>value</span>=<span>"Отправить"</span>></span>
    <span></<span>form</span>></span>
  <span></<span>body</span>></span>
<span></<span>html</span>></span></code></pre>
</div></div>
<h3>Результат</h3>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20438%20302'%3E%3C/svg%3E" width="438" height="302" alt="textareaexample2" data-lazy-src="https://ru.w3docs.com/uploads/media/default/0001/02/cdb0e2f646617df93f2b339beed22aeb2cdfcc26.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://ru.w3docs.com/uploads/media/default/0001/02/cdb0e2f646617df93f2b339beed22aeb2cdfcc26.png" width="438" height="302" alt="textareaexample2" /></noscript></p>

<div class="quads-location quads-ad193929 " id="quads-ad193929" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-5" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-5",
                renderTo: "yandex_rtb_R-A-6935943-5",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>В этом примере мы использовали CSS стили для визуального оформления текстового поля.</p>
<p>Тег <textarea> поддерживает также глобальные атрибуты  и атрибуты событий.</p>
</div>
</div>
<div class="source-url"><a href="https://ru.w3docs.com/uchebnik-html/html-teg-textarea.html" rel="noopener" target="_blank">Источник</a></div>
<div>
<div>
<article>
<div>
<ul>
<li><span> Назад </span> <small>(en-US)<small></small></small></li>
<li><span> Обзор: Forms</span></li>
<li><span> Далее  </span> <small>(en-US)<small></small></small></li>
</ul>
<p>В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!</p>
</div>
<section>
<h2>Почему так сложно стилизовать виджеты форм с помощью CSS?</h2>
<div>
<p>На заре Интернета, примерно в 1995 году, в HTML 2 были добавлены элементы управления формой. Из-за сложности виджетов форм разработчики решили полагаться на базовую операционную систему для управления ими и их рендеринга.</p>
<p>Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.</p>
<p>Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все ещё чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.</p>
<p>Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации HTML форм <small>(en-US)<small></small></small>.</p>

<div class="quads-location quads-ad193930 " id="quads-ad193930" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-6" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-6",
                renderTo: "yandex_rtb_R-A-6935943-6",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
</section>
<section>
<h3>Не все виджеты созданы равными, когда задействован CSS</h3>
<div>
<p>В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:</p>
<h4>Хорошая</h4>
<p>Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:</p>
<ol>
<li><code><form></code></li>
<li><code><fieldset></code></li>
<li><code><label></code></li>
<li><code><output></code></li>
</ol>
<p>Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.</p>
<h4>Плохая</h4>
<p>Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углублённых знаний CSS3.</p>
<p>Они включают в себя элемент <code><legend></code>, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент <code>placeholder</code> не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.</p>
<p>Мы опишем, как обрабатывать эти более конкретные случаи, в статье «Расширенные стили для HTML-форм». <small>(en-US)<small></small></small></p>
<h4>The ugly</h4>
<p>Some elements simply can’t be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including <code><select></code>, <code><option></code>, <code><optgroup></code> and <code><datalist></code> elements. The file picker widget is also known not to be stylable at all. The new <code><progress></code> and <code><meter></code> elements also fall in this category.</p>
<p>The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you’ll be able to style. We explore how to do this in the article How to build custom form widgets <small>(en-US)<small></small></small>.</p>
</div>
</section>
<section>
<h2>Basic styling</h2>
<p>To style elements that are easy to style <small>(en-US)<small></small></small> with CSS, you shouldn’t face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.</p>
</section>
<section>
<h3>Search fields</h3>
<div>
<p>Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you’ll have to tweak it with the <code>-webkit-appearance</code> proprietary property. We discuss this property further in the article: Advanced styling for HTML forms <small>(en-US)<small></small></small>.</p>
<h4>Example</h4>
<div>
<pre><code><span><span><span><</span>form</span><span>></span></span>
  <span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>search<span>"</span></span><span>></span></span>
<span><span><span></</span>form</span><span>></span></span>
</code></pre>
</div>
<div>
<pre><code><span>input[type=search]</span> <span>{</span>
  <span>border</span><span>:</span> 1px dotted #999<span>;</span>
  <span>border-radius</span><span>:</span> 0<span>;</span>

<span>-webkit-appearance</span><span>:</span> none<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>
  <img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" data-lazy-src="https://developer.mozilla.org/files/4153/search-chrome-macos.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://developer.mozilla.org/files/4153/search-chrome-macos.png" alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" loading="lazy" /></noscript>
</p>

<div class="quads-location quads-ad193931 " id="quads-ad193931" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-7" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-7",
                renderTo: "yandex_rtb_R-A-6935943-7",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the <code>-webkit-appearance</code> property, whereas the second is rendered using <code>-webkit-appearance:none</code>. This difference is noticeable.</p>
</div>
</section>
<section>
<h3>Fonts and text</h3>
<div>
<p>CSS font and text features can be used easily with any widget (and yes, you can use <code>@font-face</code> with form widgets). However, browsers’ behaviors are often inconsistent. By default, some widgets do not inherit <code>font-family</code> and <code>font-size</code> from their parents. Many browsers use the system default appearance instead. To make your forms’ appearance consistent with the rest of your content, you can add the following rules to your stylesheet:</p>
<div>
<pre><code><span>button, input, select, textarea</span> <span>{</span>
  <span>font-family</span> <span>:</span> inherit<span>;</span>
  <span>font-size</span>   <span>:</span> 100%<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform’s default font style in use. On the right are the same elements, with our font harmonization style rules applied.</p>
<p>
  <img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" data-lazy-src="https://developer.mozilla.org/files/4157/font-firefox-macos.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://developer.mozilla.org/files/4157/font-firefox-macos.png" alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" loading="lazy" /></noscript>
</p>
<p>There’s a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.</p>
</div>
</section>
<section>
<h3>Box model</h3>
<div>
<p>All text fields have complete support for every property related to the CSS box model (<code>width</code>, <code>height</code>, <code>padding</code>, <code>margin</code>, and <code>border</code>). As before, however, browsers rely on the system default styles when displaying these widgets. It’s up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you’ll face a little difficulty if you want to give them a consistent size.</p>
<p><strong>This is because each widget has their own rules for border, padding and margin.</strong> So if you want to give the same size to several different widgets, you have to use the <code>box-sizing</code> property:</p>
<div>
<pre><code><span>input, textarea, select, button</span> <span>{</span>
  <span>width</span> <span>:</span> 150px<span>;</span>
  <span>margin</span><span>:</span> 0<span>;</span>

<span>-webkit-box-sizing</span><span>:</span> border-box<span>;</span> <span>/* For legacy WebKit based browsers */</span>
     <span>-moz-box-sizing</span><span>:</span> border-box<span>;</span> <span>/* For legacy (Firefox <29) Gecko based browsers */</span>
          <span>box-sizing</span><span>:</span> border-box<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>
  <img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." data-lazy-src="https://developer.mozilla.org/files/4161/size-chrome-win7.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://developer.mozilla.org/files/4161/size-chrome-win7.png" alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." loading="lazy" /></noscript>
</p>
<p>In the screenshot above, the left column is built without <code>box-sizing</code>, while the right column uses this property with the value <code>border-box</code>. Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform’s default rules for each kind of widget.</p>
</div>
</section>
<section>
<h3>Positioning</h3>
<div>
<p>Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:</p>

<div class="quads-location quads-ad193932 " id="quads-ad193932" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-8" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-8",
                renderTo: "yandex_rtb_R-A-6935943-8",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<h4>legend</h4>
<p>The <code><legend></code> element is okay to style, except for positioning. In every browser, the <code><legend></code> element is positioned on top of the top border of its <code><fieldset></code> parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the <code>position</code> property. But otherwise it is part of the fieldset border.</p>
<p>Because the <code><legend></code> element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it’s quite often paired with a title, and then hidden in an accessible way. For example:</p>
<h5>HTML</h5>
<div>
<pre><code><span><span><span><</span>fieldset</span><span>></span></span>
  <span><span><span><</span>legend</span><span>></span></span>Hi!<span><span><span></</span>legend</span><span>></span></span>
  <span><span><span><</span>h1</span><span>></span></span>Hello<span><span><span></</span>h1</span><span>></span></span>
<span><span><span></</span>fieldset</span><span>></span></span>
</code></pre>
</div>
<h5>CSS</h5>
<div>
<pre><code><span>legend</span> <span>{</span>
  <span>width</span><span>:</span> 1px<span>;</span>
  <span>height</span><span>:</span> 1px<span>;</span>
  <span>overflow</span><span>:</span> hidden<span>;</span>
<span>}</span>
</code></pre>
</div>
<h4>textarea</h4>
<p>By default, all browsers consider the <code><textarea></code> <small>(en-US)</small> element to be an inline block, aligned to the text bottom line. This is rarely what we actually want to see. To change from <code>inline-block</code> to <code>block</code>, it’s pretty easy to use the <code>display</code> property. But if you want to use it inline, it’s common to change the vertical alignment:</p>
<div>
<pre><code><span>textarea</span> <span>{</span>
  <span>vertical-align</span><span>:</span> top<span>;</span>
<span>}</span>
</code></pre>
</div>
</div>
</section>
<section>
<h2>Example</h2>
<div>
<p>Let’s look at a concrete example of how to style an HTML form. This will help make a lot of these ideas clearer. We will build the following «postcard» contact form:</p>
<p>
  <img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="This is what we want to achieve with HTML and CSS" data-lazy-src="https://developer.mozilla.org/files/4149/screenshot.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://developer.mozilla.org/files/4149/screenshot.png" alt="This is what we want to achieve with HTML and CSS" loading="lazy" /></noscript>
</p>
<p>If you want to follow along with this example, make a local copy of our postcard-start.html file, and follow the below instructions.</p>
</div>
</section>
<section>
<h3>The HTML</h3>
<div>
<p>The HTML is only slightly more involved than the example we used in the first article of this guide <small>(en-US)<small></small></small>; it just has a few extra IDs and a title.</p>
<div>
<pre><code><span><span><span><</span>form</span><span>></span></span>
  <span><span><span><</span>h1</span><span>></span></span>to: Mozilla<span><span><span></</span>h1</span><span>></span></span>

<span><span><span><</span>div</span> <span>id</span><span><span>=</span><span>"</span>from<span>"</span></span><span>></span></span>
    <span><span><span><</span>label</span> <span>for</span><span><span>=</span><span>"</span>name<span>"</span></span><span>></span></span>from:<span><span><span></</span>label</span><span>></span></span>
    <span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>text<span>"</span></span> <span>id</span><span><span>=</span><span>"</span>name<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>user_name<span>"</span></span><span>></span></span>
  <span><span><span></</span>div</span><span>></span></span>

<span><span><span><</span>div</span> <span>id</span><span><span>=</span><span>"</span>reply<span>"</span></span><span>></span></span>
    <span><span><span><</span>label</span> <span>for</span><span><span>=</span><span>"</span>mail<span>"</span></span><span>></span></span>reply:<span><span><span></</span>label</span><span>></span></span>
    <span><span><span><</span>input</span> <span>type</span><span><span>=</span><span>"</span>email<span>"</span></span> <span>id</span><span><span>=</span><span>"</span>mail<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>user_email<span>"</span></span><span>></span></span>
  <span><span><span></</span>div</span><span>></span></span>

<span><span><span><</span>div</span> <span>id</span><span><span>=</span><span>"</span>message<span>"</span></span><span>></span></span>
    <span><span><span><</span>label</span> <span>for</span><span><span>=</span><span>"</span>msg<span>"</span></span><span>></span></span>Your message:<span><span><span></</span>label</span><span>></span></span>
    <span><span><span><</span>textarea</span> <span>id</span><span><span>=</span><span>"</span>msg<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>user_message<span>"</span></span><span>></span></span><span><span><span></</span>textarea</span><span>></span></span>
  <span><span><span></</span>div</span><span>></span></span>

<span><span><span><</span>div</span> <span>class</span><span><span>=</span><span>"</span>button<span>"</span></span><span>></span></span>
    <span><span><span><</span>button</span> <span>type</span><span><span>=</span><span>"</span>submit<span>"</span></span><span>></span></span>Send your message<span><span><span></</span>button</span><span>></span></span>
  <span><span><span></</span>div</span><span>></span></span>
<span><span><span></</span>form</span><span>></span></span>
</code></pre>
</div>
<p>Add the above code into the body of your HTML.</p>
</div>
</section>
<section>
<h3>Organizing your assets</h3>
<div>
<p>This is where the fun begins! Before we start coding, we need three additional assets:</p>
<ol>
<li>The postcard background — download this image and save it in the same directory as your working HTML file.</li>
<li>A typewriter font: The «Secret Typewriter» font from fontsquirrel.com — download the TTF file into the same directory as above.</li>
<li>A handdrawn font: The «Journal» font from fontsquirrel.com — download the TTF file into the same directory as above.</li>
</ol>
<p>Your fonts need some more processing before you start:</p>

<div class="quads-location quads-ad193933 " id="quads-ad193933" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-9" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-9",
                renderTo: "yandex_rtb_R-A-6935943-9",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<ol>
<li>Go to the fontsquirrel Webfont Generator.</li>
<li>Using the form, upload both your font files and generate a webfont kit. Download the kit to your computer.</li>
<li>Unzip the provided zip file.</li>
<li>Inside the unzipped contents you will find two <code>.woff</code> files and two <code>.woff2</code> files. Copy these four files into a directory called fonts, in the same directory as before. We are using two different files for each font to maximise browser compatibility; see our Web fonts article for a lot more information.</li>
</ol>
</div>
</section>
<section>
<h3>The CSS</h3>
<div>
<p>Now we can dig into the CSS for the example. Add all the code blocks shown below inside the <code><style></code> element, one after another.</p>
<p>First, we prepare the ground by defining our <code>@font-face</code> rules, all the basics on the <code><body></code> element, and the <code><form></code> element:</p>
<div>
<pre><code><span><span>@font-face</span></span> <span>{</span>
    <span>font-family</span><span>:</span> <span>'handwriting'</span><span>;</span>
    <span>src</span><span>:</span> <span><span>url</span><span>(</span><span>'fonts/journal-webfont.woff2'</span><span>)</span></span> <span>format</span><span>(</span><span>'woff2'</span><span>)</span><span>,</span>
         <span><span>url</span><span>(</span><span>'fonts/journal-webfont.woff'</span><span>)</span></span> <span>format</span><span>(</span><span>'woff'</span><span>)</span><span>;</span>
    <span>font-weight</span><span>:</span> normal<span>;</span>
    <span>font-style</span><span>:</span> normal<span>;</span>
<span>}</span>

<span><span>@font-face</span></span> <span>{</span>
    <span>font-family</span><span>:</span> <span>'typewriter'</span><span>;</span>
    <span>src</span><span>:</span> <span><span>url</span><span>(</span><span>'fonts/veteran_typewriter-webfont.woff2'</span><span>)</span></span> <span>format</span><span>(</span><span>'woff2'</span><span>)</span><span>,</span>
         <span><span>url</span><span>(</span><span>'fonts/veteran_typewriter-webfont.woff'</span><span>)</span></span> <span>format</span><span>(</span><span>'woff'</span><span>)</span><span>;</span>
    <span>font-weight</span><span>:</span> normal<span>;</span>
    <span>font-style</span><span>:</span> normal<span>;</span>
<span>}</span>

<span>body</span> <span>{</span>
  <span>font</span>  <span>:</span> 21px sans-serif<span>;</span>

<span>padding</span> <span>:</span> 2em<span>;</span>
  <span>margin</span>  <span>:</span> 0<span>;</span>

<span>background</span> <span>:</span> #222<span>;</span>
<span>}</span>

<span>form</span> <span>{</span>
  <span>position</span><span>:</span> relative<span>;</span>

<span>width</span>  <span>:</span> 740px<span>;</span>
  <span>height</span> <span>:</span> 498px<span>;</span>
  <span>margin</span> <span>:</span> 0 auto<span>;</span>

<span>background</span><span>:</span> #FFF <span><span>url</span><span>(</span>background.jpg<span>)</span></span><span>;</span>
<span>}</span>
</code></pre>
</div>
<p>Now we can position our elements, including the title and all the form elements:</p>
<div>
<pre><code><span>h1</span> <span>{</span>
  <span>position</span> <span>:</span> absolute<span>;</span>
  <span>left</span> <span>:</span> 415px<span>;</span>
  <span>top</span>  <span>:</span> 185px<span>;</span>

<span>font</span> <span>:</span> 1em <span>"typewriter"</span><span>,</span> sans-serif<span>;</span>
<span>}</span>

<span>#from</span> <span>{</span>
  <span>position</span><span>:</span> absolute<span>;</span>
  <span>left</span> <span>:</span> 398px<span>;</span>
  <span>top</span>  <span>:</span> 235px<span>;</span>
<span>}</span>

<span>#reply</span> <span>{</span>
  <span>position</span><span>:</span> absolute<span>;</span>
  <span>left</span> <span>:</span> 390px<span>;</span>
  <span>top</span>  <span>:</span> 285px<span>;</span>
<span>}</span>

<span>#message</span> <span>{</span>
  <span>position</span><span>:</span> absolute<span>;</span>
  <span>left</span> <span>:</span> 20px<span>;</span>
  <span>top</span>  <span>:</span> 70px<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>That’s where we start working on the form elements themselves. First, let’s ensure that the <code><label></code>s are given the right font:</p>
<div>
<pre><code><span>label</span> <span>{</span>
  <span>font</span> <span>:</span> .8em <span>"typewriter"</span><span>,</span> sans-serif<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>The text fields require some common rules. Simply put, we remove their <code>borders</code> and <code>backgrounds</code>, and redefine their <code>padding</code> and <code>margin</code>:</p>
<div>
<pre><code><span>input, textarea</span> <span>{</span>
  <span>font</span>    <span>:</span> .9em/1.5em <span>"handwriting"</span><span>,</span> sans-serif<span>;</span>

<span>border</span>  <span>:</span> none<span>;</span>
  <span>padding</span> <span>:</span> 0 10px<span>;</span>
  <span>margin</span>  <span>:</span> 0<span>;</span>
  <span>width</span>   <span>:</span> 240px<span>;</span>

<span>background</span><span>:</span> none<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>When one of these fields gains focus, we highlight them with a light grey, transparent, background. Note that it’s important to add the <code>outline</code> <small>(en-US)</small> property, in order to remove the default focus highlight added by some browsers:</p>
<div>
<pre><code><span>input:focus, textarea:focus</span> <span>{</span>
  <span>background</span>   <span>:</span> <span>rgba</span><span>(</span>0<span>,</span>0<span>,</span>0<span>,</span>.1<span>)</span><span>;</span>
  <span>border-radius</span><span>:</span> 5px<span>;</span>
  <span>outline</span>      <span>:</span> none<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>Now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won’t typically look the same using the defaults.</p>
<p>The single-line text field needs some tweaks to render nicely in Internet Explorer. Internet Explorer does not define the height of the fields based on the natural height of the font (which is the behavior of all other browsers). To fix this, we need to add an explicit height to the field, as follows:</p>
<div>
<pre><code><span>input</span> <span>{</span>
    <span>height</span><span>:</span> 2.5em<span>;</span> <span>/* for IE */</span>
    <span>vertical-align</span><span>:</span> middle<span>;</span> <span>/* This is optional but it makes legacy IEs look better */</span>
<span>}</span>
</code></pre>
</div>
<p><code><textarea></code> <small>(en-US)</small> elements default to being rendered as a block element. The two important things here are the <code>resize</code> <small>(en-US)</small> and <code>overflow</code> properties. Because our design is a fixed-size design, we will use the <code>resize</code> property to prevent users from resizing our multi-line text field. The <code>overflow</code> property is used to make the field render more consistently across browsers. Some browsers default to the value <code>auto</code>, while some default to the value <code>scroll</code>. In our case, it’s better to be sure every one will use <code>auto</code>:</p>
<div>
<pre><code><span>textarea</span> <span>{</span>
  <span>display</span> <span>:</span> block<span>;</span>

<span>padding</span> <span>:</span> 10px<span>;</span>
  <span>margin</span>  <span>:</span> 10px 0 0 -10px<span>;</span>
  <span>width</span>   <span>:</span> 340px<span>;</span>
  <span>height</span>  <span>:</span> 360px<span>;</span>

<span>resize</span>  <span>:</span> none<span>;</span>
  <span>overflow</span><span>:</span> auto<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>The <code><button></code> element is really convenient with CSS; you can do whatever you want, even using pseudo-elements <small>(en-US)<small></small></small>:</p>

<div class="quads-location quads-ad193934 " id="quads-ad193934" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-10" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-10",
                renderTo: "yandex_rtb_R-A-6935943-10",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<div>
<pre><code><span>button</span> <span>{</span>
  <span>position</span>     <span>:</span> absolute<span>;</span>
  <span>left</span>         <span>:</span> 440px<span>;</span>
  <span>top</span>          <span>:</span> 360px<span>;</span>

<span>padding</span>      <span>:</span> 5px<span>;</span>

<span>font</span>         <span>:</span> bold .6em sans-serif<span>;</span>
  <span>border</span>       <span>:</span> 2px solid #333<span>;</span>
  <span>border-radius</span><span>:</span> 5px<span>;</span>
  <span>background</span>   <span>:</span> none<span>;</span>

<span>cursor</span>       <span>:</span> pointer<span>;</span>

<span>-webkit-transform</span><span>:</span> <span>rotate</span><span>(</span>-1.5deg<span>)</span><span>;</span>
   <span>-moz-transform</span><span>:</span> <span>rotate</span><span>(</span>-1.5deg<span>)</span><span>;</span>
    <span>-ms-transform</span><span>:</span> <span>rotate</span><span>(</span>-1.5deg<span>)</span><span>;</span>
     <span>-o-transform</span><span>:</span> <span>rotate</span><span>(</span>-1.5deg<span>)</span><span>;</span>
        <span>transform</span><span>:</span> <span>rotate</span><span>(</span>-1.5deg<span>)</span><span>;</span>
<span>}</span>

<span>button:after</span> <span>{</span>
  <span>content</span><span>:</span> <span>" >>>"</span><span>;</span>
<span>}</span>

<span>button:hover,
button:focus</span> <span>{</span>
  <span>outline</span>   <span>:</span> none<span>;</span>
  <span>background</span><span>:</span> #000<span>;</span>
  <span>color</span>   <span>:</span> #FFF<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>And voila!</p>
<p><strong>Примечание:</strong> If your example does not work quite like you expected and you want to check it against our version, you can find it on GitHub — see it running live (also see the source code).</p>
</div>
</section>
<section>
<h2>Conclusion</h2>
<div>
<p>As you can see, as long as we want to build forms with just text fields and buttons, it’s easy to style them using CSS. If you want to know more of the little CSS tricks that can make your life easier when working with form widgets, take a look at the form part of the normalize.css project.</p>
<p>In the next article <small>(en-US)<small></small></small>, we will see how to handle form widgets which fall in the «bad» and «ugly» categories.</p>
<ul>
<li><span> Назад </span> <small>(en-US)<small></small></small></li>
<li><span> Обзор: Forms</span></li>
<li><span> Далее  </span> <small>(en-US)<small></small></small></li>
</ul>
</div>
</section>
<section>
<h2>In this module</h2>
</section>
</article>
</div>
</div>
<div class="source-url"><a href="https://developer.mozilla.org/ru/docs/Learn/Forms/Styling_web_forms" rel="noopener" target="_blank">Источник</a></div>
<div>
<div>
<p>Styling a <code><textarea></code> is not the same as styling an HTML <code><input></code> because both have different types of usages. We use <code><textarea></code> when we need to write multiple lines of text.<span></span></p>
<p>That’s why sometimes it seems difficult to style a <code><textarea></code> and also does not match with other <code><input></code> boxes. Textarea also has some extra things to handle and customize like, scrollbar, font, and placeholder, we can resize the textarea, etc.</p>
<p><strong>In this article, you will learn how you can style HTML <textarea></strong> <strong>very easily. You will get detailed information about this topic.</strong><span></span></p>
<h2>How to Style Textarea Placeholder</h2>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2Fhow%20to%20style%20textarea%20placeholder.png?alt=media&ezimgfmt=ng%3Awebp%2Fngcb4%2Frs%3Adevice%2Frscb4-1&token=b7566ac7-302f-49e2-b0f3-60dc907fdba6" alt="How to Style Textarea Placeholder" loading="eager" /></p>
<p>You can use many attributes with this <code><textarea></code> tag. For example, title, cols, rows, wrap, etc. <strong>You will find a list of attributes that </strong><code><textarea></code><strong> accepts at the end of this article.</strong></p>
<p>In order to, add a placeholder like any other <code><input></code> tag you have to use <code>placeholder</code> attribute in <code><textarea></code>.</p>

<div class="quads-location quads-ad193935 " id="quads-ad193935" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-11" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-11",
                renderTo: "yandex_rtb_R-A-6935943-11",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre>          <code><textarea placeholder="Enter your message..." cols="25" rows="5"></textarea></code>
        </pre>
<p>To add style to the placeholder in <code><textarea></code> you can use the following code. We select <code>::placeholder</code> in the CSS file to add any style to the placeholder.</p>
<pre>          <code>/* 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;
}</code>
        </pre>
<p>Most of the modern browsers support just <code>::placehoder</code> but to support other browsers we can use other versions like, <code>-ms-</code>, <code>-moz-</code>, <code>-webkit-</code> etc.<span></span></p>
<p>In the demo, I have used <code>font-size</code>, color, and <code>font-family</code> but you can use any CSS style you want. From now on you can customize your <code>textarea</code> placeholder according to your need.</p>
<blockquote>
<p><strong><span>Also Read:</span></strong> Async VS Defer — When & How to Use Async Defer in HTML Script Tag</p>
</blockquote>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="How to Style Text in Textarea" data-lazy-src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FHow%20to%20Style%20Text%20in%20Textarea.png?alt=media&token=0520455f-7c9d-4c5a-9c5a-ef1917f82d65" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FHow%20to%20Style%20Text%20in%20Textarea.png?alt=media&token=0520455f-7c9d-4c5a-9c5a-ef1917f82d65" alt="How to Style Text in Textarea" /></noscript></p>
<p>You can style text inside textarea similarly as you can do with any other HTML inputs. You can also use any CSS property like <code>font-size</code>, <code>font-family</code>, <code>color</code>, etc.</p>
<p>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 <code><textarea></code> then the text will use that font.</p>
<pre>          <code>textarea {
    font-size: 1rem;
    line-height: 1.5em;
    font-family: 'Roboto';
}</code>
        </pre>
<h2>How to Add Default Text in Textarea</h2>
<p>You can add default text in your <code><textarea></code> input. This text will be shown automatically inside textarea input box. Users can change that or completely replace it with their own text.</p>
<p>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.</p>
<p>To add default text in textarea input you just have to place your text in between the opening tag <code><textarea></code> and closing <code></textarea></code>. It is done.</p>

<div class="quads-location quads-ad193936 " id="quads-ad193936" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-12" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-12",
                renderTo: "yandex_rtb_R-A-6935943-12",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre>          <code><textarea>This is the default text. User will see this text automatically.</textarea></code>
        </pre>
<h2>Remove Resize Handler in Textarea</h2>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Remove Resize Handler in Textarea" data-lazy-src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FRemove%20Resize%20Handler%20in%20Textarea.png?alt=media&token=01a7d71f-c136-4a6f-9466-52c9981d840d" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FRemove%20Resize%20Handler%20in%20Textarea.png?alt=media&token=01a7d71f-c136-4a6f-9466-52c9981d840d" alt="Remove Resize Handler in Textarea" /></noscript></p>
<p>By default, browsers add resize handler in <code><textarea></code> to the bottom right corner. You can click and drag to increase or decrease the size of the textarea input.</p>
<p>If you don’t need this feature, you can disable this with just one line of CSS.</p>
<pre>          <code>textarea {
    resize: none;
}</code>
        </pre>
<h2>How to Resize Textarea Vertically</h2>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="How to Resize Textarea Vertically" data-lazy-src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FHow%20to%20Resize%20Textarea%20Vertically.png?alt=media&token=39bcf484-a114-4c5f-88c2-2d5842aa13c5" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FHow%20to%20Resize%20Textarea%20Vertically.png?alt=media&token=39bcf484-a114-4c5f-88c2-2d5842aa13c5" alt="How to Resize Textarea Vertically" /></noscript></p>
<p>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 <code><textarea></code> vertically.</p>
<p>If you add the following CSS property then users will be able to resize your textarea only vertically.<span></span></p>
<pre>          <code>textarea {
    resize: vertical;
}</code>
        </pre>
<h2>How to Resize Textarea Horizontally</h2>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="How to Resize Textarea Horizontally" data-lazy-src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FHow%20to%20Resize%20Textarea%20Horizontally.png?alt=media&token=4a09f797-e42c-45d5-89df-e72f50238450" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FHow%20to%20Resize%20Textarea%20Horizontally.png?alt=media&token=4a09f797-e42c-45d5-89df-e72f50238450" alt="How to Resize Textarea Horizontally" /></noscript></p>
<p>On the other hand, if you don’t want to change the size of your <code><textarea></code> vertically but horizontally, you can do that too.</p>
<p>Following CSS property will make your textarea horizontally resizable.</p>
<pre>          <code>textarea {
    resize: horizontal;
}</code>
        </pre>
<h2>How to Remove The Glow Around Textarea</h2>
<p>In most browsers, when you focus or write inside the <code><textarea></code> a glow or border appears. Some people like it but some don’t.</p>

<div class="quads-location quads-ad193937 " id="quads-ad193937" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-13" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-13",
                renderTo: "yandex_rtb_R-A-6935943-13",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>If this glow border does not fit with your design and you want to remove it, you can do that.<span></span></p>
<pre>          <code>textarea {
    outline: none;
}</code>
        </pre>
<p>You can also apply this style using <code>:focus</code> pseudo-class as well both work the same.</p>
<pre>          <code>textarea:focus {
    outline: none;
}</code>
        </pre>
<h2>Textarea Nowrap</h2>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Textarea Nowrap" data-lazy-src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FTextarea%20Nowrap.png?alt=media&token=90b9a419-733d-4e85-bc7c-4a200bfdf69e" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FTextarea%20Nowrap.png?alt=media&token=90b9a419-733d-4e85-bc7c-4a200bfdf69e" alt="Textarea Nowrap" /></noscript></p>
<p>Normally we use <code>white-space: nowrap;</code> 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.</p>
<p>You can customize this default scrollbar if you want. I will show you how you can style textarea scrollbar in the next sections.</p>
<p>When you press <code>Enter</code>, you move to the next line. But this CSS property does not work with <code><textarea></code>. To get a similar result, you have to use the <code>wrap="off"</code> attribute in your <code><textarea></code> input.</p>
<pre>          <code><textarea wrap='off' placeholder='Enter your message...'></textarea></code>
        </pre>
<h2>How to Make Textarea Responsive</h2>
<p>You can make the <code><textarea></code> responsive in many ways. As you have seen, you can control resize handler in textarea.</p>
<p>You can also apply <code>width</code>, <code>height</code>, <code>min-width</code>, <code>max-width</code>, <code>min-height</code> and <code>max-height</code> properties to make it responsive.</p>
<pre>          <code>textarea {
    width: 100%;
    max-width: 900px;
}</code>
        </pre>
<p>In the above code, we have set <code>width: 100%;</code> so by default textarea will take the full area. But <code>max-width: 900px;</code> means textarea will not be bigger than 900px.</p>
<p>If screen size increases, textarea size will increase up to 900px not more than that. It is also helpful if you set <code>resize: horizontal;</code>.</p>

<div class="quads-location quads-ad193938 " id="quads-ad193938" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-14" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-14",
                renderTo: "yandex_rtb_R-A-6935943-14",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>Users can resize textarea input but when you set <code>max-width: 900px;</code> users will be able to increase the textarea up to 900px. You can also set <code>min-width</code> if you want. Then users will not be able to decrease the size more than that.</p>
<pre>          <code>textarea {
    height: 300px;
    min-height: 200px;
    max-height: 500px;
}</code>
        </pre>
<p>It also works a similar way when you use the <code>height</code> property. Here default height of the <code><textarea></code> will be 300px.</p>
<p>But when you set <code>resize: vertical;</code> then users will be able to increase its height up to 500px and decrease its height up to 200px.<span></span></p>
<h2>How to Style Scrollbar in Textarea</h2>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="How to Style Scrollbar in Textarea" data-lazy-src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FHow%20to%20Style%20Scrollbar%20in%20Textarea.png?alt=media&token=0cee6b47-e0cc-4908-b8ed-fb62b62e6da7" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.webmound.com/ezoimgfmt/firebasestorage.googleapis.com/v0/b/web-mound.appspot.com/o/article%201%20-%2010%2FHow%20to%20Style%20Scrollbar%20in%20Textarea.png?alt=media&token=0cee6b47-e0cc-4908-b8ed-fb62b62e6da7" alt="How to Style Scrollbar in Textarea" /></noscript></p>
<p>When we add height to the <code><textarea></code> and users write multiple lines of text then the browser shows a default scrollbar. Scrollbar may come horizontally and vertically.</p>
<p>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.</p>
<pre>          <code>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;
}</code>
        </pre>
<p>This will add a custom scrollbar to your <code><textarea></code> input on both sides. Here, <code>textarea::-webkit-scrollbar</code> will style the background of the scrollbar and <code>textarea::-webkit-scrollbar-thumb</code> will style the scrollbar thumb, the part that moves.</p>
<p>But the above code will not work on the Firefox browser. Don’t worry you have another option.</p>
<pre>          <code>textarea {
    scrollbar-width: thin;
    scrollbar-color: #249de4 #f5f5f5;
}</code>
        </pre>
<p>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.<span></span></p>
<p>Firefox does not provide much customization options as Chrome does. You can not set a custom width for the scrollbar. The property <code>scrollbar-width</code> accepts only 3 values <code>auto</code>, <code>thin</code>, and <code>none</code>.</p>

<div class="quads-location quads-ad193939 " id="quads-ad193939" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-15" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-15",
                renderTo: "yandex_rtb_R-A-6935943-15",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>Here, <code>auto</code> is the default value and <code>none</code> 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.</p>
<p><strong>If you want to know more about scrollbars, you can follow our ultimate guide on scrollbar customization.</strong></p>
<blockquote>
<p><strong><span>Also read:</span></strong> Ultimate Guide to Create Custom Scrollbars in CSS</p>
</blockquote>
<p>But you can use 1<sup>st</sup> part <code>textarea::-webkit-scrollbar</code> and <code>textarea::-webkit-scrollbar-thumb</code>, this will work just fine.<span></span></p>
<p>Internet Explorer adds a vertical scrollbar by default in the textarea even if there is no text in it. It does not look good.</p>
<p>You can hide the default scrollbar using <code>overflow: hidden;</code> 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.</p>
<p>Therefore, we should use <code>overflow: auto;</code> this to remove the default scrollbar and it appears when needed.</p>
<pre>          <code>textarea {
    overflow: auto;
}</code>
        </pre>
<h2>All HTML Textarea Attributes</h2>
<p>Here is the list of attributes that you can use in the HTML <code><textarea></code> tag.<span></span></p>
<div>
<div>
<table>
<tbody>
<tr>
<td><strong>Attribute</strong></td>
<td><strong>Value</strong></td>
<td><strong>Description</strong></td>
</tr>
<tr>
<td>autofocus</td>
<td>autofocus</td>
<td>It is a boolean attribute. Specifies that a textarea should automatically get focused when the page loads.</td>
</tr>
<tr>
<td>autocomplete</td>
<td>off/on</td>
<td>This attribute indicates whether the browser should automatically complete the value.</td>
</tr>
<tr>
<td>cols</td>
<td>number</td>
<td>The default value is 20. Specifies the visible width of the textarea.</td>
</tr>
<tr>
<td>rows</td>
<td>number</td>
<td>It specifies the number of the visible text line in the textarea.</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>It is a boolean attribute. It makes the textarea disabled.</td>
</tr>
<tr>
<td>form</td>
<td>form_id</td>
<td>The value of this attribute should be <code>id</code> of any form element in the same document. It specifies to which <code>form</code> this textarea belongs.</td>
</tr>
<tr>
<td>maxlength</td>
<td>number</td>
<td>It specifies the maximum number of characters a user can enter.</td>
</tr>
<tr>
<td>minlength</td>
<td>number</td>
<td>It specifies the minimum number of characters a user should enter.</td>
</tr>
<tr>
<td>name</td>
<td>text</td>
<td>It specifies a name for the textarea. It helps to get the data after form submission.</td>
</tr>
<tr>
<td>placeholder</td>
<td>text</td>
<td>It specifies a short hint to the user of what should be entered in the textarea.</td>
</tr>
<tr>
<td>readonly</td>
<td>readonly</td>
<td>It is a boolean attribute. Specifies that users only can read the input value. The value of a readonly input is still submitted with the form.</td>
</tr>
<tr>
<td>required</td>
<td>required</td>
<td>This attribute specifies that the user must enter a value before submitting the form.</td>
</tr>
<tr>
<td>spellcheck</td>
<td>true/false</td>
<td>This attribute specifies whether the browser/OS should check its spelling and grammar or not.</td>
</tr>
<tr>
<td>wrap</td>
<td>soft/hard/off</td>
<td>The default value is <code>soft</code>. It indicates how the text in a textarea should be wrapped while submitting the form.</td>
</tr>
</tbody>
</table>
</div>
<h2>Conclusion</h2>
<p>In this article, we have seen multiple ways <strong>how you can style your HTML textarea</strong>. I hope from now on you will be able to customize your textarea input according to your need.</p>
</div>
</div>
</div>
<div class="source-url"><a href="https://www.webmound.com/style-html-textarea/" rel="noopener" target="_blank">Источник</a></div>
<div>
<div>
<p>Добрый день.</p>

<div class="quads-location quads-ad193940 " id="quads-ad193940" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-16" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-16",
                renderTo: "yandex_rtb_R-A-6935943-16",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>В разработке интерфейсов иногда можно встретиться с задачей выделения вводимого пользователем текста в зависимости от определенных условий. (Например, была реализована серверная проверка грамматики, либо необходимо выделять определенным цветом те или иные словаучастки и т.д.)<br />
Однако, элемент textarea не поддерживает htmlbb теги. Как один из способов решения — использование contenteditable в элементах div. <br />
В данной небольшой статье я предлагаю более-менее подробно рассмотреть способ выделения текста, используя textarea.
</p>
<h4>Общая идея решения</h4>
<p>
Так как не существует способа добавить поддержку тегов в textarea, то следующим вариантом является использование «многослойности».<br />
С помощью z-index и абсолютного позиционирования поместим блок pre за необходимым нам textarea.<br />
В элементе pre настроим шрифт аналогичный textarea и также зададим css свойства, которые нам позволят зеркально повторять текст блока textarea (о них чуть ниже)<br />
Также создадим класс, который будет после каждого изменения содержимого textarea синхронизировать данные, осуществлять поиск данных, необходимых для выделения.<br />
Иллюстрация данного решения:<br />
<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://habrastorage.org/r/w1560/storage2/110/59e/be2/11059ebe21368277e2f38ffa04b50c0e.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://habrastorage.org/r/w1560/storage2/110/59e/be2/11059ebe21368277e2f38ffa04b50c0e.png" /></noscript></p>
<h4>Разбираем решение</h4>
<p>
За основную задачу возьмем — создание класса, который на вход получает значения целевой ноды (textarea), функции — проверки на выделение и значение шрифта (css свойства font)<br />
Конструктор класса должен добавить в DOM-модель документа необходимый элемент pre, позиционировать его и повесить события. Сюда же можно добавить установку css свойств. </p>
<pre><code>/**
  * Создает экземпляр "интерактивного" textarea
  * @name TextareaExtension
  * @param target - целевой нода textarea
  * @param processor - функция для проверки слова на выделение
  * @param font - шрифт 
  */
function TextareaExtension(target , processor, font)
{
	var setStyleOptions = function()
	{
		//Добавляем класс (чтобы не прописывать все свойства), добавляем в DOM, устанавливаем font
		preItem.className = "text-area-selection";
		target.parentNode.appendChild(preItem);
		target.style.font = preItem.style.font = font || "14px Ariel";
		
		//Определяем позиционирование, прозрачность, сразу же устанавливаем скроллы
		target.style.width = preItem.style.width = target.offsetWidth + "px";
		target.style.height = preItem.style.height = target.offsetHeight + "px";
		preItem.style.top = target.offsetTop + "px";
		preItem.style.left = target.offsetLeft + "px";
		target.style.background = "transparent";
		target.style.overflow = "scroll";
		
		//Для тега pre свойство margin по умолчанию = 1em 0px. Поставим нулевые значения. 
		//(при использовании, например span вместо pre такая проблема отпадает)
		preItem.style.margin = "0px 0px";
	}
	
	setStyleOptions();
	
	//Добавляем события
    if (target.addEventListener) {
		//При изменении анализируем новое состояние textarea
        target.addEventListener("change", this.analyse, false);
        target.addEventListener("keyup", this.analyse, false);
		//Если текста было введено много - необходимо синхронизировать скролы textarea и pre
        target.addEventListener("scroll", this.scrollSync, false);
		//Также ставим обработчик на resize
        target.addEventListener("mousemove", this.resize, false);
    }
    else
        if (target.attachEvent) {
            target.attachEvent("onchange", this.analyse);
            target.attachEvent("onkeyup", this.analyse);
            target.attachEvent("onscroll", this.scrollSync);
            target.attachEvent("mousemove", this.resize);
        }
}
</code></pre>
<p>Итак, каркас класса создан. Определим оставшиеся методы класса:</p>
<pre><code>    this.scrollSync = function () {
        preItem.scrollTop = target.scrollTop;
    };

this.resize = function () {
        preItem.style.width = target.style.width;
        preItem.style.height = target.style.height;
        preItem.style.top = target.offsetTop  + "px";
        preItem.style.left = target.offsetLeft + "px";
    };
	
	 this.analyse = function (){

.text-color-bordered {
    border-bottom:1px dotted red;
}
</code></pre>
<p>Как уже было сказано, элемент pre должен позиционироваться под textarea, поэтому позиционируем его абсолютно и устанавливаем z-index в -1. Добавляем отступы, скроллы.<br />
Теперь перейдем к определениям word-wrap и white-space. В данной задаче эти свойства играют очень важную роль. <br />
white-space: pre-wrap позволяет учитывать все пробелы в строках и в то же время он не позволяет продолжать текст горизонтально (переносит его), если он не помещается в 1 строку<br />
word-wrap:break-word — определяет поведение текста, при котором слова, не помещающиеся на 1 строку не растягивают элемент, а переносятся на другую строку.</p>
<p>В результате мы получаем выделение текста по результату работы нашей функции:<br />
<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://habrastorage.org/r/w1560/storage2/7b6/a9b/a56/7b6a9ba56582c2a402e1c467028ff762.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://habrastorage.org/r/w1560/storage2/7b6/a9b/a56/7b6a9ba56582c2a402e1c467028ff762.png" /></noscript></p>
<p>Исходники:<br />
Ссылка на GitHub<br />
CodePen</p>
<h4>Расширения</h4>
<p>В данном примере представлен способ работы для встроенной функции. <br />
В тех или иных ситуациях возможны случаи, когда результат (выделятьне выделять) необходимо получить от сервера. В таком случае возможно воспользоваться паттерном команда, чтобы отправлять серверу только список изменений. А, непосредственно, выделение организовать в отдельной callback функции.</p>

<div class="quads-location quads-ad193941 " id="quads-ad193941" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-17" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-17",
                renderTo: "yandex_rtb_R-A-6935943-17",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
</div>
<div class="source-url"><a href="https://habr.com/ru/post/185558/" rel="noopener" target="_blank">Источник</a></div>
<div>
<article>
      <span></span></p>
<p>We’re going to create custom form input and textarea styles that have a near-identical appearance across the top browsers. We’ll specifically style the input types of <code>text</code>, <code>date</code>, and <code>file</code>, and style the <code>readonly</code> and <code>disabled</code> states.</p>
<p>Read on to learn how to:</p>
<ul>
<li>reset input styles</li>
<li>use <code>hsl</code> for theming of input states</li>
<li>ensure all states meet contrast requirements</li>
<li>retain a perceivable <code>:focus</code> state for Windows High Contrast mode</li>
</ul>
<blockquote>
<p><strong>Now available</strong>: my egghead video course Accessible Cross-Browser CSS Form Styling. You’ll learn to take the techniques described in this tutorial to the next level by creating a themable form design system to extend across your projects.</p>
</blockquote>
<blockquote>
<p>This is the fourth installment in the Modern CSS form field mini-series. Check out episodes 18-20 to learn how to style other common form field types including radio buttons, checkboxes, and selects.</p>
</blockquote>
<div>
<h2>Common Issues with Native Input Styles</h2>
</div>
<p>There is a bit more parity between text input styles than we saw with radios, checkboxes, and selects, but inconsistencies nonetheless.</p>
<p>Here’s a screenshot of the unstyled inputs we’re going to address today across (from left) Chrome, Safari, and Firefox.</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="native input fields including text, date, file, and readonly and disabled states in the aforementioned browsers" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/7scyr2oalmyn8fce7z6x.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/7scyr2oalmyn8fce7z6x.png" alt="native input fields including text, date, file, and readonly and disabled states in the aforementioned browsers" /></noscript></p>
<p>We will be looking to unify the initial appearance across browsers and common field types.</p>
<blockquote>
<p>The <code>date</code> field is unique in that Chrome and Firefox provide formatting and a popup calendar to select from, while Safari offers no comparable functionality. We cannot create this in CSS either, so our goal here is to get as far as we can with creating a similar initial appearance. Check out the caniuse for date/time inputs.</p>

<div class="quads-location quads-ad193942 " id="quads-ad193942" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-18" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-18",
                renderTo: "yandex_rtb_R-A-6935943-18",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</blockquote>
<div>
<h2>Base HTML</h2>
</div>
<p>We’re covering a lot of field types, so check the CodePen for the full list. But here is the essential HTML for a text input and a textarea.</p>
<pre><code><span><span><span><</span>label</span> <span>for</span><span><span>=</span><span>"</span>text-input<span>"</span></span><span>></span></span>Text Input<span><span><span></</span>label</span><span>></span></span><br /><span><span><span><</span>input</span> <span>class</span><span><span>=</span><span>"</span>input<span>"</span></span> <span>id</span><span><span>=</span><span>"</span>text-input<span>"</span></span> <span>type</span><span><span>=</span><span>"</span>text<span>"</span></span> <span>/></span></span><p><span><span><span><</span>label</span> <span>for</span><span><span>=</span><span>"</span>textarea<span>"</span></span><span>></span></span>Textarea<span><span><span></</span>label</span><span>></span></span><br /><span><span><span><</span>textarea</span> <span>class</span><span><span>=</span><span>"</span>input<span>"</span></span> <span>id</span><span><span>=</span><span>"</span>textarea<span>"</span></span><span>></span></span><span><span><span></</span>textarea</span><span>></span></span></p></code></pre>
<p>To allow simplifying our styles and preparing to work with the cascade, we’ve only added one CSS class — <code>input</code> — which is placed directly on the text input and textarea.</p>
<p>The label is not part of our styling exercise, but its included as a general requirement, notably with the <code>for</code> attribute having the value of the <code>id</code> on the input.</p>
<div>
<h2>Create CSS Variables for Theming</h2>
</div>
<p>For the tutorial, we’re going to try a bit different technique for theming by using <code>hsl</code> values.</p>
<p>We’ll set a grey for the border, and then break down a blue color to be used in our <code>:focus</code> state into its hsl values, including: <code>h</code> for «hue», <code>s</code> for «saturation», and <code>l</code> for «lightness».</p>
<pre><code><span>:root</span> <span>{</span><br />  <span>--input-border</span><span>:</span> #8b8a8b<span>;</span><br />  <span>--input-focus-h</span><span>:</span> 245<span>;</span><br />  <span>--input-focus-s</span><span>:</span> 100%<span>;</span><br />  <span>--input-focus-l</span><span>:</span> 42%<span>;</span><br /><span>}</span></code></pre>
<blockquote>
<p>Each of the tutorials for our form fields has incorporated a bit different method for theming, which can all be extracted and used beyond just forms!</p>
</blockquote>
<div>
<h3>Accessible Contrast</h3>
</div>
<p>As per all user interface elements, the input border needs to have <em>at least</em> 3:1 contrast against it’s surroundings.</p>
<p>And, the <code>:focus</code> state needs to have 3:1 contrast against the <em>unfocused</em> state if it involves something like changing the border color <em>or</em>, according to the WCAG 2.2 draft, a thickness greater than or equal to <code>2px</code>.</p>
<p>The draft for WCAG 2.2 makes some slight adjustments to <code>:focus</code> requirements, and I encourage you to review them.</p>

<div class="quads-location quads-ad193943 " id="quads-ad193943" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-19" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-19",
                renderTo: "yandex_rtb_R-A-6935943-19",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<div>
<h2>Reset Styles</h2>
</div>
<p>As is included in all my tutorials as a modern best practice, we add the following reset first:</p>
<pre><code><span>*,<br />*::before,<br />*::after </span><span>{</span><br />  <span>box-sizing</span><span>:</span> border-box<span>;</span><br /><span>}</span></code></pre>
<p>As seen in the initial state of the fields across browsers, some standout differences were in border type, background color, and font properties.</p>
<p>Interestingly, <code>font-size</code> and <code>font-family</code> do not inherit from the document like typography elements do, so we need to explicitly set them as part of our reset.</p>
<p>Also of note, an input’s <code>font-size</code> should compute to at least 16px to avoid zooming being triggered upon interaction in mobile Safari. We can typically assume <code>1rem</code> equals <code>16px</code>, but we’ll explicitly set it as a fallback and then use the newer CSS function <code>max</code> to set <code>16px</code> as the minimum in case it’s smaller than <code>1em</code> (h/t to Dan Burzo for this idea).</p>
<pre><code><span>.input</span> <span>{</span><br />  <span>font-size</span><span>:</span> 16px<span>;</span><br />  <span>font-size</span><span>:</span> <span>max</span><span>(</span>16px<span>,</span> 1em<span>)</span><span>;</span><br />  <span>font-family</span><span>:</span> inherit<span>;</span><br />  <span>padding</span><span>:</span> 0.25em 0.5em<span>;</span><br />  <span>background-color</span><span>:</span> #fff<span>;</span><br />  <span>border</span><span>:</span> 2px solid <span>var</span><span>(</span>--input-border<span>)</span><span>;</span><br />  <span>border-radius</span><span>:</span> 4px<span>;</span><br /><span>}</span></code></pre>
<p>We set our <code>border</code> to use the theme variable, and also created a slightly rounded corner.</p>
<p>After this update, we’re already looking pretty good:</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="updated input styles in Chrome, Safari, and Firefox which all show the inputs with unified grey borders and white backgrounds" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/ljnbom4rejrx08mxsa9s.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/ljnbom4rejrx08mxsa9s.png" alt="updated input styles in Chrome, Safari, and Firefox which all show the inputs with unified grey borders and white backgrounds" /></noscript></p>
<p>It may be difficult to notice in that screenshot, but another difference is the height of each field. Here’s a comparison of the text input to the file input to better see this difference:</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="text input field across browsers compared to file input" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/elc4gv33zikdjbbvdekc.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/elc4gv33zikdjbbvdekc.png" alt="text input field across browsers compared to file input" /></noscript></p>
<p>Let’s address this with the following which we are applying to our <code>.input</code> class as long as it is not placed on a <code>textarea</code>:</p>

<div class="quads-location quads-ad193944 " id="quads-ad193944" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-20" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-20",
                renderTo: "yandex_rtb_R-A-6935943-20",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre><code><span>.input:not(textarea)</span> <span>{</span><br />  <span>line-height</span><span>:</span> 1<span>;</span><br />  <span>height</span><span>:</span> 2.25rem<span>;</span><br /><span>}</span></code></pre>
<p>We included <code>line-height: 1</code> since when it’s not a <code>textarea</code> it’s impossible for an input to be multiline. We also set our height in <code>rem</code> due to considerations of specifically the file input type. If you know you will not be using a file input type, you could use <code>em</code> here instead for flexibility in creating various sized inputs.</p>
<p>But, critically, we’ve lost differentiation between editable and <code>disabled</code> input types. We also want to define <code>readonly</code> with more of a hint that it’s also un-editable, but still interactive. And we have a bit more work to do to smooth over the file input type. And, we want to create our themed <code>:focus</code> state.</p>
<div>
<h2>File Input CSS</h2>
</div>
<p>Let’s take another look at just our file input across Chrome, Safari, and Firefox:</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="current state of the file input styling across browsers" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/mawyssxau7ha2co1dfkb.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/mawyssxau7ha2co1dfkb.png" alt="current state of the file input styling across browsers" /></noscript></p>
<p>We cannot style the button created by the browser, or change the prompt text, but the reset we provided so far did do a bit of work to allow our custom font to be used.</p>
<p>We’ll make one more adjustment to downsize the font just a bit as when viewed with other field types the inherited button seems quite large, and <code>font-size</code> is our only remaining option to address it. From doing that, we need to adjust the top padding since we set our padding up to be based on <code>em</code>.</p>
<pre><code><span>input[type="file"]</span> <span>{</span><br />  <span>font-size</span><span>:</span> 0.9em<span>;</span><br />  <span>padding-top</span><span>:</span> 0.35rem<span>;</span><br /><span>}</span></code></pre>
<blockquote>
<p>If you were expecting a fancier solution, there are plenty of folx who have covered those. My goal here was to provide you a baseline that you can then build from.</p>
</blockquote>
<div>
<h2><code>readonly</code> CSS Style</h2>
</div>
<p>While not in use often, the <code>readonly</code> attribute prevents additional user input, although the value can be selected, and it is still discoverable by assistive tech.</p>
<p>Let’s add some styles to enable more of a hint that this field is essentially a placeholder for a previously entered value.</p>
<p>To do this, we’ll target any <code>.input</code> that also has the <code>[readonly]</code> attriute. Attribute selectors are a very handy method with wide application, and definitely worth adding to (or updating your awareness of) in your CSS toolbox.</p>

<div class="quads-location quads-ad193945 " id="quads-ad193945" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-21" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-21",
                renderTo: "yandex_rtb_R-A-6935943-21",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre><code><span>.input[readonly]</span> <span>{</span><br />  <span>border-style</span><span>:</span> dotted<span>;</span><br />  <span>cursor</span><span>:</span> not-allowed<span>;</span><br />  <span>color</span><span>:</span> #777<span>;</span><br /><span>}</span></code></pre>
<p>In addition to swapping for a <code>dotted</code> border, we’ve also assigned it the <code>not-allowed</code> cursor and enforced a medium-grey text color.</p>
<p>As seen in the following gif, the user cannot interact with the field except to highlight/copy the value.</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="the user mouses over the readonly field and is show the not-allowed cursor, and then double-clicks to highlight the value" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/iouhzeibpjqshlwt66mf.gif" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/iouhzeibpjqshlwt66mf.gif" alt="the user mouses over the readonly field and is show the not-allowed cursor, and then double-clicks to highlight the value" /></noscript></p>
<div>
<h2>Disabled Input and Textarea Style</h2>
</div>
<p>Similar to <code>readonly</code>, we’ll use an attribute selector to update the style for disabled fields. We are attaching it to the <code>.input</code> class so it applies on textareas as well as our other input types.</p>
<p>We’ll make use of our CSS variable to update the border color to a muted grey, and the field background to a very light grey. We’ll also again apply the <code>not-allowed</code> cursor as just an extra hint that the field is not interactive.</p>
<pre><code><span>.input[disabled]</span> <span>{</span><br />  <span>--input-border</span><span>:</span> #ccc<span>;</span><p>  <span>background-color</span><span>:</span> #eee<span>;</span><br />  <span>cursor</span><span>:</span> not-allowed<span>;</span><br /><span>}</span></p></code></pre>
<p>And here is the result for both a text input and a textarea:</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Alt Text" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/laaw2w94zl43c187ojae.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/laaw2w94zl43c187ojae.png" alt="Alt Text" /></noscript></p>
<blockquote>
<p><strong>Accessibility Note</strong>: <code>disabled</code> fields are not necessarily discoverable by assistive tech since they are not focusable. They also are not required to meet even the typical 3:1 contrast threshold for user interface elements, but we’ve kept with user expectations by setting them to shades of grey.</p>
</blockquote>
<div>
<h2>Textarea Styles</h2>
</div>
<p>Our <code>textarea</code> is really close, but there’s one property I want to mention since it’s unique to the inherent behavior of textareas.</p>

<div class="quads-location quads-ad193946 " id="quads-ad193946" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-22" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-22",
                renderTo: "yandex_rtb_R-A-6935943-22",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>That property is <code>resize</code>, which allows you to specify which direction the <code>textarea</code> can be resized, or if it even can at all.</p>
<p>While you definitely should allow the <code>textarea</code> to retain the resize function under general circumstances, you can limit it to just vertical resizing to prevent layout breakage from a user dragging it really wide, for example.</p>
<p>We’ll apply this property by scoping our <code>.input</code> class to when it’s applied on a <code>textarea</code>:</p>
<pre><code><span>textarea.input</span> <span>{</span><br />  <span>resize</span><span>:</span> vertical<span>;</span><br /><span>}</span></code></pre>
<p>Try it out in the final CodePen demo!</p>
<div>
<h2><code>:focus</code> State Styles</h2>
</div>
<p>Ok, we’ve completed the initial styles for our inputs and the textarea, but we need to handle for a very important state: <code>:focus</code>.</p>
<p>We’re going to go for a combo effect that changes the border color to a value that meets 3:1 contrast against the unfocused state, but also adds a <code>box-shadow</code> for a bit of extra highlighting.</p>
<p>And here’s why we defined our theme color of the focus state in hsl: it means we can create a variant of the border color by updating just the lightness value.</p>
<p>First, we define the border color by constructing the full hsl value from the individual CSS variable values:</p>
<pre><code><span>.input:focus</span> <span>{</span><br />  <span>border-color</span><span>:</span> <span>hsl</span><span>(</span><span>var</span><span>(</span>--input-focus-h<span>)</span><span>,</span> <span>var</span><span>(</span>--input-focus-s<span>)</span><span>,</span> <span>var</span><span>(</span>--input-focus-l<span>)</span><span>)</span><span>;</span><br /><span>}</span></code></pre>
<p>Then, we add in the <code>box-shadow</code> which will only use blur to create essentially a double-border effect. <code>calc()</code> is acceptable to use inside <code>hsla</code>, so we use it to lighten the original value by 40%, and also allow just a bit of alpha transparency:</p>
<pre><code><span>.input:focus</span> <span>{</span><br />  <span>/* ...existing styles */</span><br />  <span>box-shadow</span><span>:</span> 0 0 0 3px <span>hsla</span><span>(</span><span>var</span><span>(</span>--input-focus-h<span>)</span><span>,</span> <span>var</span><span>(</span>--input-focus-s<span>)</span><span>,</span> <span>calc</span><span>(</span><span>var</span><span>(</span>--input-focus-l<span>)</span> +<br />          40%<span>)</span><span>,</span> 0.8<span>)</span><span>;</span><br /><span>}</span></code></pre>
<p>Note that we’ve now added a new context for our contrast, which is the <code>:focus</code> border vs. the <code>:focus</code> <code>box-shadow</code>, so ensure the computed difference for your chosen colors is at least 3:1 if using this method.</p>

<div class="quads-location quads-ad193947 " id="quads-ad193947" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-23" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-23",
                renderTo: "yandex_rtb_R-A-6935943-23",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>Optionally, jump back up to the <code>.input</code> rule and add a <code>transition</code> to animate the <code>box-shadow</code>:</p>
<pre><code><span>.input</span> <span>{</span><br />  <span>/* ...existing styles */</span><br />  <span>transition</span><span>:</span> 180ms box-shadow ease-in-out<span>;</span><br /><span>}</span></code></pre>
<p>Finally, we don’t want to forget Windows High Contrast mode which will not see the <code>box-shadow</code> or be able to detect the border color change. So, we include a transparent outline for those users:</p>
<pre><code><span>.input:focus</span> <span>{</span><br />  <span>outline</span><span>:</span> 3px solid transparent<span>;</span><br /><span>}</span></code></pre>
<blockquote>
<p>We also use this technique in the episode covering button styles.</p>
</blockquote>
<p>Here’s a gif demo of focusing into the text input:</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="keyboard focusing into and out of the text input" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/jqawfxgvv2lb2x6f0q3w.gif" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/jqawfxgvv2lb2x6f0q3w.gif" alt="keyboard focusing into and out of the text input" /></noscript></p>
<p>And here’s the appearance for the <code>readonly</code> field, since it has a different <code>border-style</code>:</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="the readonly field when focused" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/lg358oqeytrd8kdnokwo.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/lg358oqeytrd8kdnokwo.png" alt="the readonly field when focused" /></noscript></p>
<p>In the CodePen HTML, there is a comment with an example of using an inline style to define an updated visual such as for an error state. Again, keep in mind that we are <em>lightening</em> the provided <code>--input-focus-l</code> value by 40%, <em>and</em> the focused border color must be at least 3:1 contrast against the unfocused color, so consider that when you alter the CSS variable values.</p>
<div>
<h2>Input Mode and Autocomplete</h2>
</div>
<p>There are two aditional attributes that can help improve the user experience, particularly on mobile, in addition to using the correct input type (ex: email).</p>

<div class="quads-location quads-ad193948 " id="quads-ad193948" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-24" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-24",
                renderTo: "yandex_rtb_R-A-6935943-24",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>The first is defining the <code>inputmode</code>, which provides an altered keyboard or keypad that better matches the expected data. Read up on available <code>inputmode</code> values on MDN ></p>
<p>Second is <code>autocomplete</code> which has far more options than <code>on</code> or <code>off</code>. For example, I always appreciate that on iPhone when Google sends me a confirmation code by text the keyboard «just knows» what that value is. Turns out, that’s thanks to <code>autocomplete="one-time-code"</code>!</p>
<p>Check out the full list of <code>autocomplete</code> values that allow you to hint at the value expected and really boost the user experience of your forms for users that make use of auto-filling values.</p>
<div>
<h2>Demo</h2>
</div>
<p>First, here’s a final look at our solution across (from left) Chrome, Safari, and Firefox. The file input still sticks out a bit when viewed side by side, but in the flow of a form on an individual browser it’s definitely acceptable.</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="final input and textarea styles across the aforementioned browsers" data-lazy-src="https://dev-to-uploads.s3.amazonaws.com/i/c05aw0mbb7ndptdn794z.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://dev-to-uploads.s3.amazonaws.com/i/c05aw0mbb7ndptdn794z.png" alt="final input and textarea styles across the aforementioned browsers" /></noscript></p>
<p>Here is the solution with all the field types we covered represented.</p>
<p><span>By Stephanie Eckles (@5t3ph)</span></p>
</article>
</div>
<div class="source-url"><a href="https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/" rel="noopener" target="_blank">Источник</a></div>
</p>

<div class="quads-location quads-ad193928 " id="quads-ad193928" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-4" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-4",
                renderTo: "yandex_rtb_R-A-6935943-4",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
</article>

<div class="b-share b-share--post">
                <div class="b-share__title">Понравилась статья? Поделить с друзьями:</div>

</div>

<h3>Читайте также: </h3>

<li class='li1'><a href='https://oshibkis.ru/kak-izmenit-czvet-text-decoration/' title='Как изменить цвет text decoration'>Как изменить цвет text decoration</a></li>
<li class='li2'><a href='https://oshibkis.ru/kak-izmenit-czvet-system-bar-android/' title='Как изменить цвет system bar android'>Как изменить цвет system bar android</a></li>
<li class='li1'><a href='https://oshibkis.ru/kak-izmenit-czvet-svg-cherez-css-pri-navedenii/' title='Как изменить цвет svg через css при наведении'>Как изменить цвет svg через css при наведении</a></li>
<li class='li2'><a href='https://oshibkis.ru/kak-izmenit-czvet-svg-cherez-css-img/' title='Как изменить цвет svg через css img'>Как изменить цвет svg через css img</a></li>
<li class='li1'><a href='https://oshibkis.ru/kak-izmenit-czvet-svg-cherez-css-background/' title='Как изменить цвет svg через css background'>Как изменить цвет svg через css background</a></li><br>

<script>window.yaContextCb=window.yaContextCb||[]</script>
<script src="https://yandex.ru/ads/system/context.js" async></script>

<div id="yandex_rtb_R-A-6935943-39"></div>
<script>
window.yaContextCb.push(() => {
    Ya.Context.AdvManager.render({
        "blockId": "R-A-6935943-39",
        "renderTo": "yandex_rtb_R-A-6935943-39",
        "type": "feed"
    })
})
</script>