HOME ABOUT CONTACT SITEMAP
Category
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Wednesday, 29 August 2018

Tùy chỉnh nội dung hiển thị thuộc tính Placeholder


Placeholder là một thuộc tính của thẻ input, khi viết code ta chỉ khai báo nó bình thường, chăm chút hơn thì set mã màu cho nó. Tuy nhiên bạn đã từng nghĩ đến sẽ làm cho nó màu mè hơn bằng việc "chèn" thêm các tag HTML để viết style chưa ? cùng tìm hiểu trong bài viết này nhé

Xem demo

demo

OK thủ thuật này đơn giản thôi, đó là ta sẽ kết hợp css position (relative → absolute) cùng với jquery toggle để thêm/bớt class khi focus vào ô input

Hướng dẫn của tôi chỉ mang tính tương đối thôi vì tôi không thể bao quát được form search của bạn như nào

Trước tiên xác định form search chèn div này vào trong nó ví dụ

<form ...>
    <div class="input-required">
        ...
    </div>
</form>

Trong div đó tiếp tục chèn đoạn code sau vào bên dưới thẻ input

<form ...>
    <div class="input-required">
        <input .../>
        <label><span style='color:green'><i class='fa fa-search'></i> Secure |</span> Search ...</label>
        ...
    </div>
</form>

Viết css (có thể bạn sẽ cần thay đổi các giá trị top,left)

.input-required{position:relative}
.input-required>label{position:absolute;left:10px;top:9px;color:#444;font-size:14px;font-family:roboto,sans-serif}
.input-required>label i.fa-search::before{font-size:13px;margin-right:2px;position:relative;top:-1px}
.input-required .hide{display:none}

Cuối cùng là js trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    $(".input-required input").on("focus", function() {
        $(this).parent(".input-required").find("label").hasClass("hide") || $(this).parent(".input-required").find("label").addClass("hide")
    }), $(".input-required input").on("blur", function() {
        "" == $(this).val() && $(this).parent(".input-required").find("label").hasClass("hide") && $(this).parent(".input-required").find("label").removeClass("hide")
    })
});
//]]></script>

Lưu mẫu lại và kiếm tra kết quả

Thật là rất màu mè tuy nhiên nó cũng giúp bạn tạo một phong cách độc/lạ so với các website khác

Good Luck
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js