2 kolory w jednym symbolu zastępczym pola wejściowego

Question

Potrzebuję utworzyć dane wejściowe, które mają 2 kolory w symbolu zastępczym.

i tutaj jest rozwiązanie, które działa dobrze w 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; 
} 

Ale mój obecny FF 29.0.1 nie wyświetla treści z: po, więc to rozwiązanie nie działa. Czy istnieje inny sposób na uzyskanie 2 kolorów w jednym miejscu z css i html?

Chrome:

FF:

Answer 1

Oto rozwiązanie cross-browser, że nie korzysta z Javascript:

Live demo

elementy Inline takie input nie obsługują :before i :after. Aby jeszcze bardziej utrudnić pracę, selektor symboli i ich pseudoklasy nie są w pełni obsługiwane przez wszystkie przeglądarki, jak się dowiedziałeś.

Tym rozwiązaniem jest dodanie względnie umieszczonego w górnej części pola wejściowego label z atrybutem for wskazującym na pole tekstowe wejściowe. W ten sposób, gdy użytkownik kliknie etykietę (fałszywy symbol zastępczy), fokus zostanie przeniesiony do pola wprowadzania.

Zastąp swój class="required" atrybutem required="required". Daje to możliwość korzystania z selektorów :invalid i :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; 
} 

Ponieważ adres e-mail nie jest wymagany, pozostaw tam natywny symbol zastępczy i po prostu włóż ten znak do nazwy.

Zmieniłem również Twój adres e-mail z type="text" na type="email" dla lepszego komfortu użytkowania na urządzeniach mobilnych.

Answer 2

samo pytanie jest zadawane here

Zasadniczo odpowiedź brzmi: nie. Zależy od przeglądarki. Nie można używać następujących elementów, takich jak <input>. To zależy od przeglądarki, ponieważ wygląda na to, że może to zrobić chrome.

Może to można rozwiązać za pomocą JavaScript? Nie wiem

Answer 3

Zainspirowany rozwiązaniem firmy Jose, bez użycia "wymaganego" atrybutu, live demo może również zrobić to, co chcesz.

Kluczowy punkt jest css ma :not selektor, patrz Mozilla website