2015-06-03 19 views
5

Tôi có các trường biểu mẫu như <input type="text" placeholder="Name*">. Sau đó, tôi đã áp dụng CSS cho trình giữ chỗ, vì vậy nó có màu xám. Tuy nhiên, tôi muốn thay đổi dấu hoa thị (*) thành màu đỏ. Làm thế nào tôi sẽ nhắm mục tiêu chỉ là một nhân vật bên trong thuộc tính với jQuery hoặc Javascript?jQuery - Nhắm mục tiêu một chữ cái cụ thể trong thuộc tính trình giữ chỗ trường mẫu

Trả lời

4

Ở đây bạn đi công trình đối với tôi

<!DOCTYPE html> 

    <head> 
     <meta charset="utf-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 


     <style> 
     input::-webkit-input-placeholder:after { 
     content: '*'; color: red; 
     } 
     </style> 
    </head> 
    <body> 
     <input type="text" placeholder="Name"></input> 

    <script> 

    </script> 

    </body> 
    </html> 
+0

Cũng thấy ở đây http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder -color-with-css – Treesrule14

+0

Chỉ hoạt động với webkit .. Không phải firefox hoặc IE –

3

Vì vậy, CSS chỉ có ::first-letterkhông::last-letter phong cách ... Để làm ::first-letter áp dụng đối với lá thư cuối cùng, bạn làm một thủ thuật bằng cách thay đổi hướng của văn bản như vậy:

::-webkit-input-placeholder { 
    unicode-bidi: bidi-override; 
    direction: rtl; 
    text-align: left; 
} 
::-webkit-input-placeholder::first-letter { /* WebKit browsers */ 
    color: red; 
} 

Vấn đề với điều này là bạn cần đảo ngược thuộc tính trình giữ chỗ và không thể sử dụng dấu hoa thị vì đó được coi là sự kết nối. Nhưng bạn có thể sử dụng các ký tự unicode:) ...

<input type="text" placeholder="★ emaN"> 

Đây là JSFiddle: http://jsfiddle.net/988aejrg/1/

Các vấn đề liên quan