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