css поле ввода текста

На чтение 6 мин. Опубликовано

C ollection of free HTML and CSS input type text code examples: placeholders, float labels, etc. Update of January 2018 collection. 2 new items.

Содержание
  1. Author
  2. Links
  3. Made with
  4. About the code
  5. input:not(:placeholder-shown)
  6. Author
  7. Links
  8. Made with
  9. About the code
  10. Form Input Design
  11. Author
  12. Links
  13. Made with
  14. About the code
  15. Input Field Gradient Border Focus Fun
  16. Author
  17. Links
  18. Made with
  19. About the code
  20. CSS Only Floated Labels
  21. Author
  22. Links
  23. Made with
  24. About the code
  25. Password Input Field
  26. Author
  27. Links
  28. Made with
  29. About the code
  30. CSS Fields
  31. Input Live Style Changer
  32. Input UI Animation
  33. Dot Digit Input
  34. Email Input Field
  35. Minimal Material Design Form Input
  36. CSS-Only Material Inputs
  37. Email Input Validation
  38. Tags Input
  39. Fancy Animated Input Field
  40. Pixie Dust Input
  41. Input Field
  42. Animated UI Text Input
  43. Webflow-Style Email Input
  44. Nice Input Box
  45. Morphing Input Field Button
  46. Google Material Design Input Boxes
  47. Colored Tags
  48. Fancy Text Inputs
  49. Author
  50. Links
  51. Made with
  52. About the code
  53. Adaptive Placeholder
  54. Text Input Love
  55. Fancy Input Field
  56. 3 ответа 3

Author

  • Andreas Storm
  • June 15, 2018

Made with

  • HTML / CSS (Stylus)

About the code

input:not(:placeholder-shown)

It looks kinda similar to the text inputs of the framework Materialize.

Author

  • Mahesh
  • January 24, 2018

Made with

  • HTML
  • CSS (bootstrap.css)

About the code

Form Input Design

Form input designs with hover and focus.

Author

  • Rik Schennink
  • December 12, 2017

Made with

  • HTML
  • CSS/SCSS

About the code

Input Field Gradient Border Focus Fun

A gradient border on an input field that feathers out when focussed.

Author

  • Nick Salloum
  • September 27, 2017

Made with

  • HTML
  • CSS/SCSS

About the code

CSS Only Floated Labels

A CSS only approach to the floated labels UI pattern.

Author

  • burnaDLX
  • June 24, 2017

Made with

  • HTML
  • CSS/Sass
  • JavaScript (jQuery.js)

About the code

Password Input Field

Password strength validation with visibility toggle.

Author

  • Stas Melnikov
  • June 17, 2017

Made with

  • HTML
  • CSS

About the code

CSS Fields

Fields with CSS custom properties.

Demo Image: Input Live Style Changer

Input Live Style Changer

This input can change his style via 3 buttons to serious, modern or cheeky with a nice style animation.
Made by Benjamin Koehler
May 2, 2017

Demo Image: Input UI Animation

Input UI Animation

Input UI animation with HTML, CSS and JavaScript.
Made by Sasha
April 26, 2017

Demo Image: Dot Digit Input

Dot Digit Input

The nice input with dots that you fill.
Made by Godje
April 26, 2017

Demo Image: Email Input Field

Email Input Field

Email input field with HTML, CSS and JavaScript.
Made by Dean Hidri
April 25, 2017

Demo Image: Minimal Material Design Form Input

Minimal Material Design Form Input

Super easy and fully scalable Material Design form input. Change one variable to change the size of everything.
Made by Kyle Lavery
March 28, 2017

Demo Image: CSS-Only Material Inputs

CSS-Only Material Inputs

Material Design style input fields.
Made by Lewis Robinson
February 8, 2017

Demo Image: Email Input Validation

Email Input Validation

Email input validation behavior — JS and SCSS.
Made by Elior Tabeka
January 22, 2017

Demo Image: Tags Input

Tags Input

Separate your tags with a comma.
Made by Julien Dargelos
January 15, 2017

Demo Image: Fancy Animated Input Field

Fancy Animated Input Field

Fancy animated input field with HTML, CSS and JavaScript.
Made by Andy PagГЁs
November 7, 2016

Demo Image: Pixie Dust Input

Pixie Dust Input

Type to have the input generate pixie dust.
Made by Rik Schennink
October 27, 2016

Demo Image: Tags

Use Tab to input a tag.
Made by Ravi Dhiman
July 22, 2016

Demo Image: Input Field

Input Field

Input with snap.svg & validation.
Made by Shehab Eltawel
July 20, 2016

Demo Image: Animated UI Text Input

Animated UI Text Input

Expanding text input with HTML, CSS and JavaScript.
Made by Shehab Eltawel
May 12, 2016

Demo Image: Webflow-Style Email Input

Webflow-Style Email Input

Webflow-Style email input with HTML and CSS.
Made by Phil Rose
August 27, 2015

Demo Image: Nice Input Box

Nice Input Box

Nice input box with a lot of styling based on sibling selectors and psuedo classes. CSS only.
Made by Andrew Tunnecliffe
July 16, 2015

Demo Image: Morphing Input Field Button

Morphing Input Field Button

An email input field, styled to look like a button, that when clicked morphs into an email field.
Made by Caleb Sylvest
December 16, 2014

Demo Image: Google Material Design Input Boxes

Google Material Design Input Boxes

A CSS experiment to recreate the Google Material Design Polymer input boxes in CSS.
Made by Chris Sevilleja
July 24, 2014

Demo Image: Colored Tags

Colored Tags

Custom tagging system for describing an element.
Made by Jordan-Simonds
June 11, 2014

Demo Image: Fancy Text Inputs

Fancy Text Inputs

Using the required hack.
Made by Alex Bergin
June 8, 2014

Author

  • Danny King
  • April 26, 2014

Made with

  • HTML (Haml) / CSS (Less)

About the code

Adaptive Placeholder

Once activated, the input placeholders become input labels.

Demo Image: Text Input Love

Text Input Love

Playing with some input styles that don’t rely on hover, don’t add clutter, show the label at all times, and show placeholder text when it is actually relevant.
Made by Michael Arestad
September 16, 2013

Demo Image: Fancy Input Field

Fancy Input Field

Trying to make input field that is a bit more fancy than the regular boring box. Works nicely on Chrome/FF/Safari but requires some tweaking on iOS and IE.
Made by bartekd
January 31, 2013

Здравствуйте, возможно ли сменить оформление текстового поля input? Если это возможно, подтолкните в нужное направление.

Смотрел в Googl`e, ни чего внятного не нашел. Спасибо.

3 ответа 3

Лучше будет учесть все

Можно также добавить стиль при на нажатии(фокусе) на поле

не обязательно можно просто

тогда свойство будет применено для всех инпатов.

Для всех Input с type=»text»

Можно. В css пишешь стиль, а input’у присваивашь нужный класс. Вот пример из админки DLE. В CSS

Для создания области, в которую можно вводить несколько строк текста, предназначен элемент

Между тегами можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты

Атрибут Описание
cols Ширина поля в символах.
maxlength Максимальное число символов текста, которое можно ввести.
name Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
rows Высота поля в строках текста.
wrap Параметры переноса строк.

Создание поля многострочного текста показано в примере 1.

Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).

Пример 1. Текстовое поле

Результат примера показан на рис. 1.

Рис. 1. Вид текстового поля по умолчанию

При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width ), высоту ( height ), границу ( border ), цвет текста и фона ( color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.

Пример 2. Оформление текстового поля

Результат данного примера показан на рис. 2.

Рис. 2. Изменение вида текстового поля

Все браузеры кроме Internet Explorer поддерживают изменение размера для

. Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в разных браузерах может несколько различаться, но общая схожесть сохраняется.

Рис. 3. Уголок для изменения размера

Если вам не нужно, чтобы пользователь мог менять размеры текстового поля, то добавьте свойство resize со значением none .

Оцените статью