30/09/2018, 21:26
Cách thêm Icon vào trước text trong placeholder (css )
mình đang không biết làm thế nào để thêm icon vào trước placeholder , mình thử search trên mạng mà không tìm ra cách nên ai biết chỉ mình với . tks nhiều
Bài liên quan
Bạn thêm background cho nó. icon đấy là background image. ví dụ thế này:
Mình có 1 element input là:
input type=“text” class=“form-control” id=“search” placeholder=“Search”
-thêm vào trong file css:
css: #search{
background-image: url(…/images/home/searchicon.png); //đây là icon cần thêm
background-repeat: no-repeat; //không lặp
background-position: 280px; //điều chỉnh vị trí của image, dịch trái, phải. hoặc lên, xuống.
}
nếu dùng image thì mình pk rùi , vấn đề là mình được giao bài tập phải dùng awesome icon . mà như vậy mình không biết làm sao thêm vào đằng trước text trong placeholder hết .
nếu dùng cách trên thì mình dùng before cũng được , không cần phải chỉnh vị trí
Dùng thuộc tính position: absolute cho icon, position: relative cho thẻ input, sau đó chỉnh cho icon nằm ở bên phải hoặc bên trái so với thẻ input bằng các thuộc tính top, right, left, bottom.
Nhớ thêm padding-left hoặc padding-right cho input để text không bị trùng vào icon.