Dans l'espace réservé d'entrée, j'essaie de définir le nom de l'espace réservé avec la couleur noire et l'étoile avec la couleur rouge comme champ obligatoire, mais je n'ai pas appliqué une seule couleur rouge spécifique à Star, il existe donc un autre moyen de définir la couleur Veuillez me suggérer le meilleur moyen?
J'ai déjà essayé de définir en utilisant mais je n'ai pas obtenu la résolution appropriée,
:: - WebKit-input-placeholder: après {
contenu: "*";
La couleur rouge;
}
Démo mentionnée ci-dessous:
3 Réponses :
Il n'y a pas de solution parfaite.
La première option consiste à utiliser des images d'arrière-plan, mais la position de l'étoile doit être définie manuellement pour chaque champ:
<input required="required">
<div class="placeholder">name<span>*</span>
.placeholder {
position: ...
pointer-events: none;
user-select: none;
}
.placeholder > span { color: red; }
input:valid ~ .placeholder {
display: none;
}
Si vous ne peut pas se permettre de placer manuellement chaque étoile que vous utilisez un faux espace réservé html en plaçant un div sous chaque et en le faisant se comporter comme un espace réservé:
input::placeholder {
background-image: url('images/some-red-star.png') no-repeat;
background-position-x: 50px;
}
Cela fonctionnera pour vous. Je viens de coder pour un seul champ.
<div class="form-group"> <input type="text" name="name" required="required" /> <label>Enter first name</label> </div>
.form-group{position:relative;}
.form-group input{position:relative;z-index:9;background:transparent;border:1px solid #aaa;padding: 5px}
.form-group label{position:absolute;left:5px;top:5px;z-index:1;color:#ccc;}
.form-group label::after{content:"*";color:red;}
input[required]:valid + label{display: none;}
Essayez ceci Je pense que c'est utile pour vous
<form>
<input type="text" id="box1" required="required" />
<label for="name">Enter First Name</label><br/><br/>
<input type="text" id="box1" required="required" />
<label for="name">Enter Last Name</label><br/>
<input class="btn" type="submit" />
</form>
input {
width: 200px;
padding: 8px;
}
input[required] + label {
position: relative;
color: #000;
font-size: 16px;
left: -210px;
}
input[required] + label:after {
content: '*';
color: red;
}
.btn {
width: auto;
margin: 10px 0;
}
l'espace réservé ne disparaît pas lorsque je commence à taper l'entrée
Avez-vous essayé cette réponse? : stackoverflow.com/questions/22415875/… Faites le moi savoir!
Copie possible de 2 couleurs dans un espace réservé du champ de saisie
Copie possible de Ajouter une étendue dans l'espace réservé du formulaire