Меню
Спросить
*.{ }

Урок 7. Стилизация textarea

5 декабря 2016
Урок 7. Стилизация textarea

Всем привет, сегодня будем стилизовать элемент textarea.

  1. display:block;
  2. width:700px;
  3. height:400px;
  4. margin:0 auto;
  5. resize:vertical;
  6. outline:none;
  7. border-width:2px;
  8. border-radius:2px;
  9. font-size:18pt;
  10. text-align:center;
  11. background:#ecf0f1;
  12. color:rgb(52, 73, 94);

Немного разберем

Для того, чтобы расположить textarea по середине родительского блока задаем три свойства:

  1. display:block;
  2. width:700px;
  3. height:400px;
  4. margin:0 auto;
  5. resize:vertical;
  6. outline:none;
  7. border-width:2px;
  8. border-radius:2px;
  9. font-size:18pt;
  10. text-align:center;
  11. background:#ecf0f1;
  12. color:rgb(52, 73, 94);

Далее, уберем у textarea возможность пользователю изменять ее размер по горизонтали:

  1. display:block;
  2. width:700px;
  3. height:400px;/*Длина:400px*/
  4. margin:0 auto;
  5. resize:vertical;
  6. outline:none;/*Светящаяся рамка:убераем*/
  7. border-width:2px;/*Ширина рамки:2px*/
  8. border-radius:2px;/*Скругление углов:2px*/
  9. font-size:18pt;/*Размер шрифта:18pt*/
  10. text-align:center;/*Положение текста:по центру*/
  11. background:#ecf0f1;
  12. color:rgb(52, 73, 94);

Было

Стилизация textarea

Стало

Стилизация textarea

Заключение

На этом стилизацию не останавливается конечно, попробуйте добавить что-то свое, оставляйте комментарии. Более подробное объяснение кода в видео ниже.
Пока =)

Следующая статьяПредыдущая статья