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

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ม.ค. 2025

ความคิดเห็น • 122

  • @podcastreddit
    @podcastreddit 3 ปีที่แล้ว +3

    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
    @hoangtuan7156 3 ปีที่แล้ว +1

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

  • @habao1514
    @habao1514 3 ปีที่แล้ว

    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
    @cao-bac 3 ปีที่แล้ว +1

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

  • @tinnguyen9651
    @tinnguyen9651 3 ปีที่แล้ว +1

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

    • @tinnguyen9651
      @tinnguyen9651 3 ปีที่แล้ว

      @@evondevfrontend âu cơ anh hehe

  • @LapTrinhQuaNhanh
    @LapTrinhQuaNhanh 2 ปีที่แล้ว +1

    Hay. Quá hay

  • @taitrivo9031
    @taitrivo9031 3 ปีที่แล้ว +2

    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
      @evondevfrontend  3 ปีที่แล้ว +1

      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
      @tuannguyenanh4061 3 ปีที่แล้ว

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

    • @phucnguyenvan7106
      @phucnguyenvan7106 2 ปีที่แล้ว

      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

  • @doremon7334
    @doremon7334 3 ปีที่แล้ว

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

  • @tuannguyenthai
    @tuannguyenthai 3 ปีที่แล้ว +1

    đỉnh quá anh trai ơi

  • @tuyentrancong3646
    @tuyentrancong3646 3 ปีที่แล้ว

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

  • @mrtoan5558
    @mrtoan5558 3 ปีที่แล้ว

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

  • @nguyenthanhhoa5650
    @nguyenthanhhoa5650 3 ปีที่แล้ว +2

    Giống floating textField của material

  • @hrevlog76
    @hrevlog76 3 ปีที่แล้ว

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

  • @quacquac_quacquac
    @quacquac_quacquac 3 ปีที่แล้ว

    Dạ em cảm ơn 💕💕

  • @hoanchaukhai7942
    @hoanchaukhai7942 3 ปีที่แล้ว

    trick hay quá a ơi

  • @daisynguyen307
    @daisynguyen307 3 ปีที่แล้ว

    Cảm ơn anh.

  • @haiangnguyen2976
    @haiangnguyen2976 ปีที่แล้ว

    em cảm ơn sir

  • @vuduynhien38
    @vuduynhien38 3 ปีที่แล้ว

    Hay quá anh

  • @attranuc2001
    @attranuc2001 2 ปีที่แล้ว

    rat hay a

  • @rokchuyencung
    @rokchuyencung 2 ปีที่แล้ว

    hay quá

  • @nguyennhat9516
    @nguyennhat9516 3 ปีที่แล้ว

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

  • @rahnetruong1169
    @rahnetruong1169 3 ปีที่แล้ว

    víp quá thầy ơi

  • @kientrung2567
    @kientrung2567 2 ปีที่แล้ว

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

    • @evondevfrontend
      @evondevfrontend  2 ปีที่แล้ว

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

  • @truonghoanglong541
    @truonghoanglong541 3 ปีที่แล้ว

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

  • @DoHongGiang
    @DoHongGiang 3 ปีที่แล้ว

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

  • @thuannguyenlehoa9711
    @thuannguyenlehoa9711 2 ปีที่แล้ว +1

    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
      @evondevfrontend  2 ปีที่แล้ว

      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à

  • @ThaoPham-fj7zy
    @ThaoPham-fj7zy 3 ปีที่แล้ว

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

  • @tienat1709
    @tienat1709 3 ปีที่แล้ว +1

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

    • @tienat1709
      @tienat1709 3 ปีที่แล้ว

      @@evondevfrontend Chuẩn anh ạ

  • @nmhieu2709
    @nmhieu2709 3 ปีที่แล้ว

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

  • @baoduy7198
    @baoduy7198 3 ปีที่แล้ว

    Hay anh

  • @hoaivienhcm
    @hoaivienhcm 3 ปีที่แล้ว +1

    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
      @evondevfrontend  3 ปีที่แล้ว +1

      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
      @hoaivienhcm 3 ปีที่แล้ว +1

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

    • @evondevfrontend
      @evondevfrontend  3 ปีที่แล้ว +1

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

    • @hoaivienhcm
      @hoaivienhcm 3 ปีที่แล้ว

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

  • @nguyenngochai0z
    @nguyenngochai0z 3 ปีที่แล้ว

    Ảo ma thật đấy

  • @nguyentrunghieu2772
    @nguyentrunghieu2772 3 ปีที่แล้ว

    Ra tiếp phần Grid đi anh

  • @trungvinh6473
    @trungvinh6473 3 ปีที่แล้ว +1

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

    • @TungLe-bv9hc
      @TungLe-bv9hc 3 ปีที่แล้ว +1

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

    • @trungvinh6473
      @trungvinh6473 3 ปีที่แล้ว

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

  • @jimnnn
    @jimnnn 3 ปีที่แล้ว

    hay anh ơi

  • @lebao03_ytb
    @lebao03_ytb 2 ปีที่แล้ว

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

    • @evondevfrontend
      @evondevfrontend  2 ปีที่แล้ว

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

    • @lebao03_ytb
      @lebao03_ytb 2 ปีที่แล้ว

      @@evondevfrontend vâng thanks anh ạ

  • @khaipham7634
    @khaipham7634 3 ปีที่แล้ว

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

  • @diaryforlife
    @diaryforlife 3 ปีที่แล้ว

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

  • @phamvandan7092
    @phamvandan7092 3 ปีที่แล้ว

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

  • @VinCi1608
    @VinCi1608 3 ปีที่แล้ว +1

    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

  • @PhongLe-zd9iw
    @PhongLe-zd9iw 3 ปีที่แล้ว

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

    • @PhongLe-zd9iw
      @PhongLe-zd9iw 3 ปีที่แล้ว

      @@evondevfrontend a có zalo ko a

    • @PhongLe-zd9iw
      @PhongLe-zd9iw 3 ปีที่แล้ว

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

  • @phosvs4591
    @phosvs4591 3 ปีที่แล้ว

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

  • @dnnhacbuon8171
    @dnnhacbuon8171 3 ปีที่แล้ว

    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
      @evondevfrontend  3 ปีที่แล้ว

      trong video là vậy mà bro

    • @leevu12
      @leevu12 2 ปีที่แล้ว

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

  • @camnghiemtang9370
    @camnghiemtang9370 3 ปีที่แล้ว

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

    • @vinhhoang9492
      @vinhhoang9492 3 ปีที่แล้ว

      ban ko hieu dc thuoc tinh cua no roi :v

  • @khanhduy9540
    @khanhduy9540 3 ปีที่แล้ว

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

  • @HuyLe-xj6yl
    @HuyLe-xj6yl 3 ปีที่แล้ว

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

    • @HuyLe-xj6yl
      @HuyLe-xj6yl 3 ปีที่แล้ว

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

  • @HD-ti3yj
    @HD-ti3yj 3 ปีที่แล้ว +1

    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
      @evondevfrontend  3 ปีที่แล้ว +2

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

  • @nguyenphuongnam1232
    @nguyenphuongnam1232 3 ปีที่แล้ว

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

  • @natsukihatake7658
    @natsukihatake7658 2 ปีที่แล้ว

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

  • @Nguyen-ih6sn
    @Nguyen-ih6sn 2 ปีที่แล้ว +1

    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
      @vivufly9 ปีที่แล้ว

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

  • @nguyenvanhung8560
    @nguyenvanhung8560 3 ปีที่แล้ว

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

  • @hicee
    @hicee 3 ปีที่แล้ว

    hay

  • @trantandatvuive
    @trantandatvuive 2 ปีที่แล้ว

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

    • @tuhoccodethietkeweb4598
      @tuhoccodethietkeweb4598 2 ปีที่แล้ว

      Ô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

  • @aotrongduy6535
    @aotrongduy6535 2 ปีที่แล้ว

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

  • @nhiempc
    @nhiempc ปีที่แล้ว

    giống TextField MUI

  • @tuhoccodethietkeweb4598
    @tuhoccodethietkeweb4598 2 ปีที่แล้ว

    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 ạ

    • @Nguyen-ih6sn
      @Nguyen-ih6sn 2 ปีที่แล้ว

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

    • @Nguyen-ih6sn
      @Nguyen-ih6sn 2 ปีที่แล้ว

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

    • @tuhoccodethietkeweb4598
      @tuhoccodethietkeweb4598 2 ปีที่แล้ว

      @@Nguyen-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
      @đ.anhnef 2 ปีที่แล้ว

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

    • @tuhoccodethietkeweb4598
      @tuhoccodethietkeweb4598 2 ปีที่แล้ว +1

      @@Nguyen-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

  • @Fred-ny8jm
    @Fred-ny8jm 2 ปีที่แล้ว

    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
      @evondevfrontend  2 ปีที่แล้ว +2

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

    • @Fred-ny8jm
      @Fred-ny8jm 2 ปีที่แล้ว

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

    • @dj_arimakousei
      @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
      @evondevfrontend  ปีที่แล้ว

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

    • @dj_arimakousei
      @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

  • @nhatminhhoang1469
    @nhatminhhoang1469 3 ปีที่แล้ว +1

    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
      @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

  • @vansaubui95
    @vansaubui95 3 ปีที่แล้ว

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

    • @vansaubui95
      @vansaubui95 3 ปีที่แล้ว

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

  • @bangzino
    @bangzino 3 ปีที่แล้ว

    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
      @evondevfrontend  3 ปีที่แล้ว

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

    • @bangzino
      @bangzino 3 ปีที่แล้ว

      @@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.

  • @athuyh1159
    @athuyh1159 3 ปีที่แล้ว +1

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

  •  2 ปีที่แล้ว

    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

  • @xuanchinh97
    @xuanchinh97 3 ปีที่แล้ว

    set font vscode chuối quá 😂

  • @quyetle5886
    @quyetle5886 3 ปีที่แล้ว

    hay quá anh ơi