- Trang chủ
- CSS Tricks
- Làm thế nào style color placeholder input ?
Làm thế nào style color placeholder input ?
Placeholder input là gì ?
Placeholder input là đoạn text giữ chỗ cho thẻ input. Khi thẻ input chưa có giá trị [rỗng] thì đoạn text trong placeholder sẽ hiển thị, ngược lại khi ta bắt đầu gõ chữ vào input thì đoạn text placeholder sẽ ẩn đi.
Để sử dụng ta chỉ cần thêm thuộc tính placeholder cho thẻ input. Và ta có thể style placeholder bằng css với các thuộc tính như style text bình thường: color, font-size, font-weight,....
Màu sắc mặc định của placeholder trên tất cả các trình duyệt là màu xám nhạt [light grey].
Cú pháp style placeholder input như thế nào ?
Sau đây là cú pháp cơ bản để style placeholder input:
::placeholder { /* Thuộc tính css; */ }
Ngoài ra để nó hoạt động tốt trên các trình duyệt khác, ta có thể thêm tiền tố vào phía trước nó. Xem ví dụ bên dưới:
::-webkit-input-placeholder { /* Edge */ color: #000; font-size:12px; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #000; font-size:12px; } ::placeholder { color: #000; font-size:12px; }
Bình luận
CSS Tricks
- 1. Vẽ hình bằng CSS
- 2. Hiệu ứng loading đẹp bằng CSS
- 3. Tạo dấu 3 chấm cuối dòng
- 4. Hiệu ứng hover button
- 5. Làm menu cấp 3 đơn giản
- 6. Làm menu cấp 3 hover effect
- 7. Làm menu sidebar
- 8. Làm menu sidebar - final với slideToggle
- 9. Fix hình ảnh đều nhau
- 10. Style color placeholder input
Học HTML từ A-Z
- 1. Giới thiệu HTML
- 2. Trình viết code HTML
- 3. HTML Cơ bản
- 4. HTML Attribute
- 5. HTML Text format
- 6. HTML Quotation
- 7. HTML Comment
- 8. HTML CSS
- 9. HTML Links
- 10. HTML Images
Học CSS từ A-Z
- 1. Giới thiệu CSS
- 2. Cú pháp CSS
- 3. Chèn CSS vào website
- 4. CSS Colors
- 5. CSS Backgrounds
- 6. CSS Borders
- 7. CSS Margin
- 8. CSS Padding
- 9. CSS Height và width
- 10. CSS Box model
- 11. CSS Text
- 12. CSS Fonts
- 13. CSS Icons
- 14. CSS Links
- 15. CSS Lists
- 16. CSS Tables
- 17. CSS Display
- 18. CSS Position
- 19. CSS Overflow
- 20. CSS Float
- 21. CSS Inline Block
- 22. CSS Align
- 23. CSS Selector kết hợp
- 24. CSS Pseudo class
- 25. CSS Pseudo elements
- 26. CSS Opacity
- 27. CSS Image sprites
- 28. CSS Attr selector
- 29. CSS Forms
- 30. CSS Counter
- 31. CSS Units
Học Javascript từ A-Z
- 1. JS Intro
- 2. JS where to
- 3. JS Output
- 4. JS Statements
- 5. JS Syntax
- 6. JS Operators
- 7. JS Data types
- 8. JS Functions
- 9. JS Object
- 10. JS Events
- 11. JS Strings
- 12. JS String Methods
- 13. JS Numbers
- 14. JS Number Methods
- 15. JS Arrays
- 16. JS Array Methods
- 17. JS Array Sort
- 18. JS Array Loop
- 19. JS Dates
- 20. JS Math
- 21. JS Boolean
- 22. JS If else
- 23. JS Switch
- 24. JS For loop
- 25. JS While loop
- 26. JS Break và Continue
- 27. JS Regular Expression
- 28. JS Errors
- 29. JS Scope
- 30. JS Debugging
Học Jquery từ A-Z
- 1. Jquery Intro
- 2. Jquery Selector
- 3. Jquery Events
- 4. Jquery Hide/Show
- 5. Jquery Fade
- 6. Jquery Slide
- 7. Jquery Animation
- 8. Jquery Stop
- 9. Jquery Callback
- 10. Jquery Chaining
- 11. Jquery Get
- 12. Jquery Set
- 13. Jquery Add
- 14. Jquery Remove
- 15. Jquery CSS Class
- 16. Jquery Size
- 17. Jquery Access
- 18. Jquery AJAX