Hiệu ứng focus cho input cực hay mà bạn không nên bỏ qua
🔥 Tham khảo khoá học HTML CSS cơ bản của mình: evondev.com/khoa-hoc-html-css
🔥 Tham khảo khoá học HTML CSS nâng cao của mình: evondev.com/khoa-hoc-huong-da...
🔥 Tham khảo khoá học Javscript cơ bản của mình: evondev.com/khoa-hoc-javascri...
👉 Kết nối với mình
🚀Fanpage: / evondevblog
🚀Facebook: / tuan.trananh.0509
🚀Blog: evondev.com
🚀Nhóm của mình: / 2565163230401512
🚀Học online với mình: / tuan.trananh.0509
👉 Theme: Evondev Dracula
👉 Font chữ: SF Mono, 14px
👉 Extension VSCode: Evondev Dracula, Evondev Snippets, Prettier, Material Icon, Highlight Matching Tag, Bracket Pair Colorizer, HTML Snippets, Live Server, Live Server Preview
👉 Extension Chrome: Eye Dropper color picker Chrome Extension, color slurp MacOS, visBug Chrome Extension
👉Source code tại đây: github.com/evondev/youtube
👉Extension gõ pháo hoa: Powermode
Пікірлер: 122
mình theo front-end và ghiền UI, gặp được kênh của bạn mình mừng ghê.
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ự
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
Bác dev này chất đấy 🥰
Hay anh ơi, mong a ra nhiều tip trick như z
Cảm ơn anh. Vẫn đang hóng chờ phần chuẩn bị base hehe
@tinnguyen9651
3 жыл бұрын
@@evondevfrontend âu cơ anh hehe
Tuyệt vời quá cảm ơn anh nhiều
Làm sao vscode hiện được style như class và href dạng type script như anh vậy ạ
Cho mình hỏi phần mềm bạn cài để pick color ở taskbar tên là gì?
Hay lắm b, đúng thứ mình cần
@NhacNayeChill
3 жыл бұрын
mình cũng thế :V
đỉnh quá anh trai ơi
Hay. Quá hay
rat hay a
Cảm ơn anh.
lập trình thật thú vị :)
Cái bảng màu anh dùng phần mềm gì vậy
Dạ em cảm ơn 💕💕
a hướng dẫn e custom vscode lúc gõ có hiệu ứng như a đi
Hay quá anh
Giống floating textField của material
trick hay quá a ơi
hay quá anh ơi
Extension để xem html ontime kia là gì a ơi
Ra tiếp phần Grid đi anh
víp quá thầy ơi
font chữ của chữ màu xanh lá cây là gì ạ?
Hay anh
em cảm ơn sir
hay anh ơi
T cũng hay dùng cách này :D
sao em css cho cái input:focus mà nó nhận chỉ màu đen thôi ạ.
anh Tuấn ơi, cho em hỏi cái nhắc lệnh anh dùng extension nào vậy ạ?
@HuyLe-xj6yl
3 жыл бұрын
@@evondevfrontend cảm ơn anh Tuấn nha ;)
hay quá
Ảo ma thật đấy
hay
a ơi cho em hỏi phần tại saoo lại dùng padding thay vì dùng margin a nhỉ
@vinhhoang9492
2 жыл бұрын
ban ko hieu dc thuoc tinh cua no roi :v
Anh ơi, em nghĩ dùng cái input:valid + label cũng đc anh ạ
@tienat1709
3 жыл бұрын
@@evondevfrontend Chuẩn anh ạ
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
2 жыл бұрын
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
2 жыл бұрын
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
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
2 жыл бұрын
vậy hả, e thử nhập sai email thử xem coi sao em ?
Extension gợi ý tên class trong file css là gì vậy anh
@nguyenphuongnam1232
3 жыл бұрын
@@evondevfrontend cảm ơn anh
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
3 жыл бұрын
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
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
Anh cho e hỏi chút ạ anh dùng theme gì đẹp thế ?
@evondevfrontend
2 жыл бұрын
a dùng theme Evondev Dracula nà
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à
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
9 ай бұрын
bạn thiếu outline: none; loại bỏ viền ngoại vi mặc định của thẻ input
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à
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
2 жыл бұрын
outline:0
Anh ơi ví dụ "form-input:forcus + form-label "dưới dạng scss thì viết sao Anh nhỉ.
@TungLe-bv9hc
3 жыл бұрын
.form { &-input:focus + &-label { ... } }
@trungvinh6473
3 жыл бұрын
@@TungLe-bv9hc Cảm ơn bro nhá.
giống TextField MUI
Làm sao để tắt cái viền khi focus vào input thế a
@evondevfrontend
2 жыл бұрын
outline none đó bạn
chất lượng có 360 a ơi
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
2 жыл бұрын
dùng input:not(:focus) thử xem được ko
@bangzino
2 жыл бұрын
@@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.
anh cài extension gì mà bấm chữ nó có cái nháy nháy v ạ
@evondevfrontend
2 жыл бұрын
power mode
làm sao để xoá cái viền đen khi focus vào thẻ input ạ
@evondevfrontend
2 жыл бұрын
Ý em là outline ha
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
2 жыл бұрын
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ử
@hoaitrung6955
2 жыл бұрын
@@evondevfrontend ý e là trong thẻ input ấy a ơi
@evondevfrontend
2 жыл бұрын
@@hoaitrung6955 ah vậy là caret-color nhen
@hoaitrung6955
2 жыл бұрын
@@evondevfrontend cảm ơn a nhìu
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
2 жыл бұрын
chắc bạn code sai đó nè
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
2 жыл бұрын
trong video là vậy mà bro
@leevu12
2 жыл бұрын
Chưa xem hết đã phán haizz
Dấu + trong css là gì nhỉ
@vansaubui95
3 жыл бұрын
@@evondevfrontend cảm ơn bác đã chỉ :D
a có thể giúp e một vấn đề đ. c ko a
@PhongLe-zd9iw
3 жыл бұрын
@@evondevfrontend a có zalo ko a
@PhongLe-zd9iw
3 жыл бұрын
@@evondevfrontend cho e xin zalo e nt hỏi tí ạ
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
2 жыл бұрын
translateY(-50%) dịch ngược 1/2 chiều cao của phần tử nha em
@Fred-ny8jm
2 жыл бұрын
@@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
set font vscode chuối quá 😂
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
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 ạ
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
@HadeszsScarling
Жыл бұрын
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