Áp dụng CSS style cho placeholder để tạo điểm nhấn trong thiết kế text input

Bạn có biết sử dụng CSS chúng ta có thể trang trí lại hiển thị của placeholder trong trường input nhập văn bản?

Giả sử trong trang của bạn có một trường input để người dùng có thể nhập địa chỉ email đăng ký nhận tin. Mã HTML của trường input này thông thường sẽ như sau:

<input type="email" placeholder="Enter your email">

Trường hợp bạn muốn trình duyệt hiển thị placeholder của trường này theo kiểu in nghiêng thì sẽ phải làm thế nào?

Công việc này có thể thực hiện đơn giản với CSS như sau:

/* Chrome, Opera, Safari */
::-webkit-input-placeholder {
  font-style: italic;
}

/* Firefox 19+ */
::-moz-placeholder {
  font-style: italic;
}

/* IE 10+ */
:-ms-input-placeholder {
  font-style: italic;
}

/* Firefox 18- */
:-moz-placeholder {
  font-style: italic;
}

Và bây giờ khi mở lại trang bạn sẽ thấy placeholder sẽ được hiển thị với kiểu chữ in nghiêng.

Hiệu ứng không đơn giản ở in nghiêng hay in đậm bạn có thể áp dụng tất cả các thuộc tính khác để mang đến điểm nhất cho thiết kế của trang.

Đây là một trong những thiết kế của tôi mà bạn có thể tham khảo:

Đoạn code HTM tôi sử dụng dựa trên Twitter Bootstrap như sau:

<form action="#" class="form-horizontal text-center">
    <div class="form-group">
        <div class="col-xs-12 col-md-6 col-md-offset-3">
            <div class="input-group">
                <input type="email" class="form-control" placeholder="Enter your email">
                <div class="input-group-addon" role="button">Subscribe</div>
            </div>
        </div>
    </div>
</form>

Và mã CSS để tạo ra hiệu ứng cho trường input trên:

form {
  background-color: #ff7a59;
  color: #fff;
}

input {
  height: 50px;
  border: none;
  outline: 0 !important;
  background: rgba(255,255,255,.25);
  color: #fff;
  .box-shadow(none);
}
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #fff;
.text-semi-bold;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #fff;
.text-semi-bold;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #fff;
.text-semi-bold;
}
input:-moz-placeholder { /* Firefox 18- */
color: #fff;
.text-semi-bold;
}

.input-group-addon {
  background-color: #fff !important;
  color: @standout-color;
  outline: 0 !important;
  border: none;
  height: 50px;
  .border-radius(0 2px);
  &:hover {
    cursor: pointer;
  }
}

Nếu bạn thấy bài viết này hữu ích đừng quyên chia sẻ chúng để mọi người đều có thể tham khảo kiến thức trong bài viết này và cũng là một động lực quan trọng để tôi có thể tiếp tục chia sẻ thêm những kỹ thuật mới trong các lần tới.

Chúc bạn thành công!