Question

占位符应显示输入名称*，带有白色文本，但*为红色。我在Chrome中使用Bootstrap 4。我的HTML和CSS代码是这些：

.form-control::-webkit-input-placeholder::after {
    color: red;
    text-align: right;
    font-size: 50px;
    content: "*";
}

<input type="text" placeholder="Your Name" class="form-control py-4" style="background: #273a71; color: white; border: 0;">

Answer 1

要获得预期结果，请使用以下选项

使用跨度或标签代替占位符（如果需要标签和占位符，请使用跨度）
专注于使用CSS隐藏跨度

.placeholder{
  color: white;
  position: relative;
  top: -30px;
}

.placeholder:after{
  content: '*';
  color: red
}


.form-control:focus + .placeholder { 
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text"  class="form-control py-4" style="background: #273a71; color: white; border: 0;" required="required">
<span class="placeholder">Your Name</span>

codepen-https://codepen.io/nagasai/pen/GzQVev

如何在占位符中添加红色星号？

1 个答案: