2 màu trong một trình giữ chỗ của trường nhập

Question

Tôi cần tạo đầu vào có 2 màu trong trình giữ chỗ.

và đây là giải pháp hoạt động tốt trong Chrome.

http://jsfiddle.net/vmuJm/

html

<input placeholder="Name" class="required" /> 

css

.required::-webkit-input-placeholder:after { 
    content:'*'; 
    color: red; 
} 
.required:-moz-placeholder:after { 
    /* Firefox 18- */ 
    content:'*'; 
    color: red; 
} 
.required::-moz-placeholder:after { 
    /* Firefox 19+ */ 
    content:'*'; 
    color: red; 
} 
.required:-ms-input-placeholder:after { 
    content:'*'; 
    color: red; 
} 

Nhưng hiện tại của tôi FF 29.0.1 không hiển thị nội dung từ: sau, vì vậy giải pháp này không hoạt động. Có cách nào khác để có được 2 màu sắc trong một trình giữ chỗ với css và html?

Chrome:

FF:

Answer 1

Dưới đây là một giải pháp qua trình duyệt mà không sử dụng javascript:

Live demo

yếu tố Inline như input không hỗ trợ :before và :after. Để làm cho mọi thứ trở nên khó khăn hơn, bộ chọn giữ chỗ và các lớp giả của chúng không được hỗ trợ đầy đủ bởi tất cả các trình duyệt, như bạn đã tìm ra.

Vì vậy, giải pháp thay thế là thêm label được đặt tương đối trên đầu trang của hộp nhập với thuộc tính for trỏ đến hộp văn bản đầu vào. Bằng cách này, khi người dùng nhấp vào nhãn (trình giữ chỗ giả) tiêu điểm sẽ đi vào hộp nhập liệu.

Thay thế class="required" theo thuộc tính required="required". Điều này mang đến cho bạn cơ hội sử dụng các bộ chọn :invalid và :valid.

<form> 
    <input type="text" id="name" name="name" required="required" /> 
    <label for="name">Name</label> 
    <br/> 
    <input type="email" id="email" name="email" placeholder="Email" /> 
    <br/> 
    <input type="submit" /> 
</form> 

input { 
    width: 160px; 
} 

input[type=submit] { 
    width: auto; 
} 

input[required] + label { 
    color: #999; 
    font-family: Arial; 
    font-size: .8em; 
    position: relative; 
    left: -166px; /* the negative of the input width */ 
} 

input[required] + label:after { 
    content:'*'; 
    color: red; 
} 

/* show the placeholder when input has no content (no content = invalid) */ 
input[required]:invalid + label { 
    display: inline-block; 
} 

/* hide the placeholder when input has some text typed in */ 
input[required]:valid + label{ 
    display: none; 
} 

Vì email là không bắt buộc, hãy giữ nguyên trình giữ chỗ gốc và chỉ để hack tên này.

Tôi cũng đã thay đổi email của bạn từ type="text" thành type="email" để có trải nghiệm người dùng tốt hơn trên thiết bị di động.

Answer 2

Cùng câu hỏi được hỏi here

Về cơ bản các câu trả lời là không. Phụ thuộc vào trình duyệt.

:before và :after không thể được sử dụng trên một số thành phần như <input>. Nó phụ thuộc vào trình duyệt mặc dù, vì nó có vẻ như chrome có thể làm điều đó.

Có thể nó có thể được giải quyết bằng JavaScript? Tôi không biết

Answer 3

Lấy cảm hứng từ giải pháp của Jose mà không sử dụng thuộc tính "bắt buộc", live demo cũng có thể làm những gì bạn muốn.

Điểm mấu chốt là css có :not chọn, hãy tham khảo Mozilla website