Hiệu ứng focus cho input cực hay mà bạn không nên bỏ qua

[@podcastreddit]

NghỈ dịch làm remote font-end cứ xong 2-3 section là vào evondev ngồi xem tips trick :v hay thực sự

[@hoangtuan7156]

mình theo front-end và ghiền UI, gặp được kênh của bạn mình mừng ghê.

[@habao1514]

mình làm front end 3 năm mà cũng vào xem bro này :)) nhiều cái ko biết thật haha

[@cao-bac]

Bác dev này chất đấy 🥰

[@taitrivo9031]

mình phải thêm thuộc tính outline: none; nữa vào focus thì nó mới đổi màu border được

[@evondevfrontend]

Mấy cái đó là thiết lập ban đầu rồi bạn, nên bạn thấy mình ko code là thế

[@tuannguyenanh4061]

thảo nào ko đổi màu đc

[@phucnguyenvan7106]

bro cho mk hỏi sao sau khi mình nhập bỏ chuột ra ngoài thì lable nó lại tụt xuống nhỉ. mk viết y như anh ý r

[@nguyenthanhhoa5650]

Giống floating textField của material

[@tinnguyen9651]

Cảm ơn anh. Vẫn đang hóng chờ phần chuẩn bị base hehe

[@tinnguyen9651]

@@evondevfrontend âu cơ anh hehe

[@tuyentrancong3646]

Hay anh ơi, mong a ra nhiều tip trick như z

[@doremon7334]

lập trình thật thú vị :)

[@hrevlog76]

Tuyệt vời quá cảm ơn anh nhiều

[@LapTrinhQuaNhanh]

Hay. Quá hay

[@mrtoan5558]

Hay lắm b, đúng thứ mình cần

[@NhacNayeChill]

mình cũng thế :V

[@tuannguyenthai]

đỉnh quá anh trai ơi

[@nguyennhat9516]

a hướng dẫn e custom vscode lúc gõ có hiệu ứng như a đi

[@nguyentrunghieu2772]

Ra tiếp phần Grid đi anh

[@ThaoPham-fj7zy]

Cho mình hỏi phần mềm bạn cài để pick color ở taskbar tên là gì?

[@truonghoanglong541]

Cái bảng màu anh dùng phần mềm gì vậy

[@quacquac_quacquac]

Dạ em cảm ơn 💕💕

[@diaryforlife]

T cũng hay dùng cách này :D

[@hoaivienhcm]

làm sao để đổi màu cái thanh gõ ở trong thẻ vậy a, mặc định nó màu đen, mình mà đổi bachground màu đen thì bị trung màu thanh gõ mất

[@evondevfrontend]

cursor mặc định đâu phải màu đen, nó chạy theo theme mà, em vào vscode settings tìm cursor setting xem thử

[@hoaivienhcm]

@@evondevfrontend ý e là trong thẻ input ấy a ơi

[@evondevfrontend]

@@hoaivienhcm ah vậy là caret-color nhen

[@hoaivienhcm]

@@evondevfrontend cảm ơn a nhìu

[@khaipham7634]

Làm sao vscode hiện được style như class và href dạng type script như anh vậy ạ

[@tienat1709]

Anh ơi, em nghĩ dùng cái input:valid + label cũng đc anh ạ

[@tienat1709]

@@evondevfrontend Chuẩn anh ạ

[@DoHongGiang]

Extension để xem html ontime kia là gì a ơi

[@nmhieu2709]

font chữ của chữ màu xanh lá cây là gì ạ?

[@trungvinh6473]

Anh ơi ví dụ "form-input:forcus + form-label "dưới dạng scss thì viết sao Anh nhỉ.

[@TungLe-bv9hc]

.form { &-input:focus + &-label { ... } }

[@trungvinh6473]

@@TungLe-bv9hc Cảm ơn bro nhá.

[@thuannguyenlehoa9711]

placeholder-shown là nội dung của placeholder => true nhưng khi gõ chữ vào ô input thì lúc này placeholder mất => false mà sử dụng :not nữa nên mới thực thi css đúng k ạ?

[@evondevfrontend]

a ko có nhiều thời gian để trả lời hết các câu hỏi của em, em nên lên fb hỏi vào các nhóm fb ấy tổng hợp lại rồi hỏi lần luôn nà

[@rahnetruong1169]

víp quá thầy ơi

[@HuyLe-xj6yl]

anh Tuấn ơi, cho em hỏi cái nhắc lệnh anh dùng extension nào vậy ạ?

[@HuyLe-xj6yl]

@@evondevfrontend cảm ơn anh Tuấn nha ;)

[@attranuc2001]

rat hay a

[@MinhNguyen-ih6sn]

A ơi iiiiiiiiii, cho e hỏi tại sao ở cái đoạn .form-input:forcus { } đổi màu của border nhưng của e nó vẫn ra cái màu đen mặc định vậy ạ. A giúp e với

[@vivufly9]

bạn thiếu outline: none; loại bỏ viền ngoại vi mặc định của thẻ input

[@kientrung2567]

anh ơi sao em dugnf forcus rồi mà ko chịu thay đổi bordẻ khi click vào v anh

[@evondevfrontend]

kiểm tra css outline đã xóa chưa nà

[@camnghiemtang9370]

a ơi cho em hỏi phần tại saoo lại dùng padding thay vì dùng margin a nhỉ

[@vinhhoang9492]

ban ko hieu dc thuoc tinh cua no roi :v

[@hoanchaukhai7942]

trick hay quá a ơi

[@lebao03_ytb]

phut 5:38 gọi lớp rồi + lớp là sao vậy anh khó hiểu khúc đó quá

[@evondevfrontend]

em tìm hiểu css selectors, ở kênh anh cũng có luon á

[@lebao03_ytb]

@@evondevfrontend vâng thanks anh ạ

[@daisynguyen307]

Cảm ơn anh.

[@phosvs4591]

Anh cho e hỏi chút ạ anh dùng theme gì đẹp thế ?

[@evondevfrontend]

a dùng theme Evondev Dracula nà

[@VinCi1608]

cái input của mình mặc định khi focus thì nó có cái border màu đen, làm sao để bỏ vậy bạn

[@dnnhacbuon8171]

outline:0

[@PhongLe-zd9iw]

a có thể giúp e một vấn đề đ. c ko a

[@PhongLe-zd9iw]

@@evondevfrontend a có zalo ko a

[@PhongLe-zd9iw]

@@evondevfrontend cho e xin zalo e nt hỏi tí ạ

[@haiangnguyen2976]

em cảm ơn sir

[@vuduynhien38]

Hay quá anh

[@HD-ti3yj]

thay placeholder-shown bằng valid e thấy nó vẫn hoạt động, z có khác nhau chỗ nào k anh

[@evondevfrontend]

vậy hả, e thử nhập sai email thử xem coi sao em ?

[@nguyenngochai0z]

Ảo ma thật đấy

[@nguyenphuongnam1232]

Extension gợi ý tên class trong file css là gì vậy anh

[@nguyenphuongnam1232]

@@evondevfrontend cảm ơn anh

[@phamvandan7092]

Làm sao để tắt cái viền khi focus vào input thế a

[@evondevfrontend]

outline none đó bạn

[@dnnhacbuon8171]

Chào bạn, khi fucus nó nhảy lên label bỏ focus thì nó về giữa ô input vậy người dùng đang nhập dở click ra làm sao cái label nó k về giữa nữa vì đang có nội dung trong text r

[@evondevfrontend]

trong video là vậy mà bro

[@leevu12]

Chưa xem hết đã phán haizz

[@nvn4791]

giống TextField MUI

[@rokchuyencung]

hay quá

[@natsukihatake7658]

anh cài extension gì mà bấm chữ nó có cái nháy nháy v ạ

[@evondevfrontend]

power mode

[@athuyh1159]

chất lượng có 360 a ơi

[@Fred-ny8jm]

Anh ơi anh cho em hỏi ở phút 3:40 tại sao transform: translateY(-50%) vậy ạ? Em có thử code lại thì vẫn không hiểu sao top 50% lại không nằm chính giữa div form-field đặt position: relative chỉ khi sử dụng thêm translateY(-50%) nó mới nằm chính giữa vậy ạ? Em có học qua bài transform rồi nhưng đoạn này vẫn chưa tư duy được ạ. Mong anh giải đáp thắc mắc giúp em. Em cảm ơn anh nhiều ạ!

[@evondevfrontend]

translateY(-50%) dịch ngược 1/2 chiều cao của phần tử nha em

[@Fred-ny8jm]

@@evondevfrontend Dạ em hiểu rồi em cảm ơn anh nhiều lắm ạ ^^

[@dj_arimakousei]

@@evondevfrontendnếu thế top 50% cũng thế mà nhỉ nó cách phần trên cùng của thẻ cha nó mà cha nó thì có chiều cao bằng nội dung chứa thì dịch 50% phải ở giữa rồi chứ nhỉ

[@evondevfrontend]

@@dj_arimakousei thế chiều cao của nó thì sao em

[@dj_arimakousei]

@@evondevfrontend mãi em mới hiểu là 50% xuống là tính từ mép trên cùng đúng ko anh nên nó bị lệnh xuống ko phải ở giữa...e ko thấy kênh nào giải thích mãi e ms hiểu ra

[@khanhduy9540]

sao em css cho cái input:focus mà nó nhận chỉ màu đen thôi ạ.

[@baoduy7198]

Hay anh

[@jimnnn]

hay anh ơi

[@nguyenvanhung8560]

làm sao để xoá cái viền đen khi focus vào thẻ input ạ

[@evondevfrontend]

Ý em là outline ha

[@aotrongduy6535]

cho mình hỏi tại sao đổi màu r mà sau ấn vào input nó vẫn màu đen ạ?

[@evondevfrontend]

chắc bạn code sai đó nè

[@trantandatvuive]

làm sao để nó hiện hình vuông khi anh ấn cái dòng vậy a

[@tuhoccodethietkeweb4598]

Ông thêm border-radius vào phần form-input:focus, chỉnh nó thành ô vuông, bấm vào là được

[@vansaubui95]

Dấu + trong css là gì nhỉ

[@vansaubui95]

@@evondevfrontend cảm ơn bác đã chỉ :D

[@xuanchinh97]

set font vscode chuối quá 😂

[@nhatminhhoang1469]

Em mới học thôi nên có ý này muốn hỏi anh ạ. Mấy cái này vào trong việc làm thực tế có dùng nhiều không ạ. Hay sẽ dùng input viết sẵn của framework ạ

[@vlogjvevermind3065]

muốn độc, lạ và theo ý khách hàng thì phải tự gõ css thôi b, chứ sài framwork thì trẻ con nó cx làm được

[@bangzino]

Có 1 điểm nhỏ là khi nhập chữ trong ô input rồi thì khi click chuột ra ngoài chữ Name vẫn màu tím và border của input thì chuyển lại thành màu đen. Không biết có cách nào để chuyển chữ Name thành màu đen theo Input không ạ?

[@evondevfrontend]

dùng input:not(:focus) thử xem được ko

[@bangzino]

@@evondevfrontend Được ạ. Nhưng mình cho nó màu đen thì lúc chưa nhập chữ (nó đang ở vị trí placehoder) thì nó màu đen chứ không phải màu xám như placeholder ấy a.

[@tuhoccodethietkeweb4598]

anh ơi, sao tới khúc form-input: focus lúc em bấm vào ô thì lại không đổi màu anh nhỉ, em muốn lúc em bấm vào ô input thì ô input sẽ hiển thị màu khác ví dụ như màu đỏ màu xanh chứ không phải là màu đen mặc định của input á anh, mới đầu em còn tưởng em viết sai cái gì, nhưng em thêm background-color thì focus vẫn chạy như bình thường á, chỉ có mỗi khung input thì không đổi màu thôi ạ

[@MinhNguyen-ih6sn]

Á đù, cả cái clip mình cũng bị lỗi ở chỗ đó đây, hóng hóng,

[@MinhNguyen-ih6sn]

Tìm ra lỗi chưa bạn ơi......

[@tuhoccodethietkeweb4598]

@@MinhNguyen-ih6sn Lỗi thì mình có test mấy tiếng, có lần thì làm ra được, có lần thì vẫn code như cũ thì lại làm không được, nên khá cay nè, tui tính là lên trường hỏi thử ông thầy dạy tui cách đổi màu ô input khi dùng focus rồi tui sẽ chỉ ông nè, chắc có thể là thứ 5 tui sẽ trả lời

[@đ.anhnef]

ban them 1 dong outline: none vao trong .form-input:focus la duoc nha

[@tuhoccodethietkeweb4598]

@@MinhNguyen-ih6sn alo, bạn làm được chưa, bạn Đức Anh nói là thêm outline: none; vào focus nha, thì lúc bạn bấm vào nó sẽ đổi màu được, mình làm thử và được rồi nha bạn

[@hicee]

hay

cái material chuyên dùng hiệu ứng này, còn mình rất ghét vì thực tế các dự án hầu như không dùng kiểu này, custom từ material lại mất công

[@quyetle5886]

hay quá anh ơi