Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
34 Input CSS Javascript Đẹp Cho Website

34 Input CSS Javascript Đẹp Cho Website


Ngày 28 Tháng 8 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu những thiết kế đẹp và sáng tạo cho ô input bằng HTML, CSS và Javascript nhé!

Những Thiết Kế Đẹp Cho Ô Input

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Tổng Hợp Các Hiệu Ứng Input CSS

Tổng Hợp Các Hiệu Ứng Input CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Awesome input focus effects by Takuma.I (@Takumari85) on CodePen.

Nguồn

Input Effects HTML5 CSS3

Input Effects HTML5 CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Text input love by Michael Arestad (@MichaelArestad) on CodePen.

Nguồn

Cách Tạo Input Focus Effect CSS

Input Focus Effect CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Nice, compliant input boxes by Andrew Tunnecliffe (@atunnecliffe) on CodePen.

Nguồn

Cách Tạo Email Input HTML

Email Input HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Email Input Field by Dean Hidri (@visualcookie) on CodePen.

Nguồn

Thiết Kế Input Suggestions Javascript

Input Suggestions Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Typing Suggestions by Sikriti Dakua (@dev_loop) on CodePen.

Nguồn

Thiết Kế Input Border Bottom Animation CSS

Input Border Bottom Animation CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Input Text Material with Gradient by Lucas Oliveira (@lucasyem) on CodePen.

Nguồn

Thiết Kế Input Với Border Gradient

Input Với Border Gradient

Kết quả bạn xem bên dưới nhé!

See the Pen Input Field Gradient Border Focus Fun by Rik Schennink (@rikschennink) on CodePen.

Nguồn

Cách Tạo Input Label Animation CSS3

Input Label Animation CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Field Animations with CSS Custom Properties by Stas Melnikov (@melnik909) on CodePen.

>

Nguồn

Cách Tạo Input Google Material Design

Input Google Material Design

Kết quả bạn xem bên dưới nhé!

See the Pen Google Material Design Input Boxes by Chris on Code (@chrisoncode) on CodePen.

Nguồn

Thiết Kế Input Style CSS

Input Style CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Input Live Style Changer by Benjamin Koehler (@codesuey) on CodePen.

Nguồn

Thiết Kế Input Border Animation CSS3

Input Border Animation CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Webflow-style email input by Phil Rose (@PRtheRose) on CodePen.

Nguồn

Thiết Kế Email Input HTML CSS

Email Input HTML CSS

Kết quả bạn xem bên dưới nhé!

See the Pen input field with states by Fabian Pecher (@fpecher) on CodePen.

Nguồn

Thiết Kế Input Validation Javascript

Input Validation Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Email Input Validation behavior - JS and SCSS by Elior Tabeka (@eliortabeka) on CodePen.

Nguồn

Cách Tạo Animated Input Field

Animated Input Field

Kết quả bạn xem bên dưới nhé!

See the Pen Fancy Animated Input Field by Andy Pagès (@andyNroses) on CodePen.

Nguồn

Cách Tạo CSS Floated Label Input

CSS Floated Label Input

Kết quả bạn xem bên dưới nhé!

See the Pen CSS Only Floated Labels by Nick Salloum (@callmenick) on CodePen.

Nguồn

Thiết Kế Input Label Animation Khi Focus

Input Label Animation Khi Focus

Kết quả bạn xem bên dưới nhé!

See the Pen Bump name by Mikael Ainalem (@ainalem) on CodePen.

Nguồn

Thiết Kế Tag Input Javascript

Tag Input Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Tags Input by Julien Dargelos (@juliendargelos) on CodePen.

Nguồn

Cách Tạo SVG Input Field

SVG Input Field

Kết quả bạn xem bên dưới nhé!

See the Pen Input with snap.svg & validation by Shehab Eltawel (@shehab-eltawel) on CodePen.

Nguồn

Thiết Kế Input Effect HTML5

Input Effect HTML5

Kết quả bạn xem bên dưới nhé!

See the Pen Pixie Dust Input by Rik Schennink (@rikschennink) on CodePen.

Nguồn

Cách Tạo Hiệu Ứng Move Label Khi input:focus

Hiệu Ứng Move Label Khi input:focus

Kết quả bạn xem bên dưới nhé!

See the Pen Textbox /Text Input field Inspiration (Pure CSS) by Aditya Bhandari (@takeradi) on CodePen.

Nguồn

Thiết Kế Code Input Field Jquery

Code Input Field Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen Code Input Field by Aaron Iker (@aaroniker) on CodePen.

Nguồn

Cách Tạo Lock Input Field HTML

Lock Input Field HTML

Kết quả bạn xem bên dưới nhé!

See the Pen Locked input field - CSS only by Niels Voogt (@NielsVoogt) on CodePen.

Nguồn

Thiết Kế Input Placeholder Animation CSS

Input Placeholder Animation CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Input text interaction animation by Aaron Iker (@aaroniker) on CodePen.

Nguồn

Cách Tạo Email Input Validation

Email Input Validation

Kết quả bạn xem bên dưới nhé!

See the Pen Email validation animation by Aaron Iker (@aaroniker) on CodePen.

Nguồn

Cách Tạo Expand Input Khi Focus

Expand Input Khi Focus

Kết quả bạn xem bên dưới nhé!

See the Pen Animated UI text input by Shehab Eltawel (@shehab-eltawel) on CodePen.

Nguồn

Các Hiệu Ứng Input Field Effects CSS

Hiệu Ứng Input Field Effects CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Text Input Effects by Kabir Shah (@KingKabir) on CodePen.

Nguồn

Cách Tạo Focus Input Animation Jquery

Focus Input Animation Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen Simple focus in/out input animation by Mirko Zorić (@fluxus) on CodePen.

Nguồn

Thiết Kế Fancy Password Input Animation

Fancy Password Input Animation

Kết quả bạn xem bên dưới nhé!

See the Pen Fancy Password input animation by Maurice Melchers (@mephysto) on CodePen.

Nguồn

Cách Tạo Input Animation Border CSS

Input Animation Border CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Input Animation CSS by webcrafters (@webcrafterscz) on CodePen.

Nguồn

Thiết Kế Input Form Animation Jquery

Input Form Animation Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen Input animation by Lukmo (@lukmo) on CodePen.

Nguồn

Cách Tạo Material Input Label Animation

Material Input Label Animation

Kết quả bạn xem bên dưới nhé!

See the Pen Animated Input Placeholder by Momcilo Popov (@Momciloo) on CodePen.

Nguồn

Cách Tạo Animated Input Label

 Animated Input Label

Kết quả bạn xem bên dưới nhé!

See the Pen Animated Input Labels by Jarrod Thibodeau (@jarrodthibodeau) on CodePen.

Nguồn

Cách Tạo CSS3 Animated Input Box

CSS3 Animated Input Box

Kết quả bạn xem bên dưới nhé!

See the Pen CSS Animated Input by Ben Gallagher (@sqdge) on CodePen.

Nguồn

Thiết Kế CSS Input Label

CSS Input Label

Kết quả bạn xem bên dưới nhé!

See the Pen CSS input label by Harm Putman (@harmputman) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thiết kế input hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!