Ho campi modulo come <input type="text" placeholder="Name*">. Poi ho applicato il CSS al segnaposto, quindi è grigio. Tuttavia, voglio cambiare l'asterisco (*) per essere rosso. Come faccio a scegliere come target solo quel personaggio all'interno dell'attributo con jQuery o Javascript?jQuery - Targeting di una lettera specifica all'interno del campo modulo attributo segnaposto
Qui si va opere per me
<!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>
Così CSS ha solo ::first-letter e non::last-letter styling ... Per rendere ::first-letter applicare all'ultima lettera, si fa un trucco cambiando la direzione del testo in questo modo:
::-webkit-input-placeholder {
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
}
::-webkit-input-placeholder::first-letter { /* WebKit browsers */
color: red;
}
il problema con questo è che avrete bisogno di invertire l'attributo segnaposto e non è possibile utilizzare un asterisco perché è considerato di punzzione. Ma è possibile utilizzare caratteri Unicode:) ...
<input type="text" placeholder="★ emaN">
Ecco il JSFiddle: http://jsfiddle.net/988aejrg/1/
vedi anche qui http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder -color-with-css – Treesrule14
Funziona solo per webkit .. Non firefox o IE –