小贝子编程

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



我正在构建一个在占位符中包含问题的表单。现在，我想要一个红色星号作为必填字段。通常，我们可以使用span为星号赋予不同的样式，但在我的情况下，我不能在占位符中添加span。

* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>

https://paulund.co.uk/add-required-asterisk-with-css有没有一种方法可以在我的代码中使用这个网站的方法？

这并不理想，但由于您说过不能添加元素，也没有提到使用JS，所以我尝试了一个仅css的解决方案。。。再说一遍，情况并不理想。我不知道这一页前后会发生什么。我在包含按钮的div上使用::before添加了星号，并将其设置为position:relative，而星号则设置为position:absolute，并移到输入字段旁边。我准备好拿干草叉和火把了。

/*---------------------------------*/
input[type="email"][required]+.btn-box::before {
content: "*";
color: red;
display: block;
position: absolute;
top: -70px;
left: -10px;
}
input[type="email"][required]+.btn-box {
position: relative;
}

/*---------------------------------*/
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>

我可以放心地假设OP(又名O原始poster)不会使用<span>的原因是因为<input>有width: 100%。每当display: inline(即<span>)或inline-block使具有width: 100%的元素前进时，该元素就被迫占据width: 100%的前一个元素下面的空间。

只需减少<input>中的width并使用<span>


演示程序A与OP的演示程序完全相同，除了<input>具有width: 90%和<span class='asterisk'>*</span>。

Demo B和Demo C是以下改进版本：

  • 使用像<fieldset>和<legend>这样的语义元素
  • 删除了一些无效的样式
  • 已移除CCD_ 22
  • 改变了margins、padding、text-align和font-size，这些都是严格意义上更好的IMO
  • 删除了属性CCD_ 27。请参阅下面<form>部分中的<button>

此外，演示B使用以下内容显示星号：

  • <label>而不是<span>

此外，演示C使用以下内容显示星号：

  • CSS属性::after被分配给<fieldset>元素，而不是像前面的演示中使用的<label>或<span>那样实际使用额外的元素

注意：在所有的演示中，一个特殊的字符被用于实际的星号，称为">"；组合上面的星号">。这个角色出现在行的顶部，非常像一个超级脚本角色。

另请注意：font-sizes是绝对值(px)，我通常不会使用，但OP的演示没有响应。

<form>中的<button>

<form>中的<button>在用户单击它时具有继承行为，<form>将根据HTML或JavaScript中设置的任何适用指令进行验证，然后如果一切正常，它将提交数据。如果<button>具有type="button"，则<button>在没有JavaScript的情况下不会执行任何操作，这意味着HTML属性required仅限于在<input>悬停时通过显示消息来验证用户输入。

在Demo B和Demo C中，<button>没有type="button"。输入而非的电子邮件地址，并将行为与演示A进行比较。当在Demo B或Demo C中输入有效的电子邮件地址时，输入的数据将消失，这意味着它已提交(当然，它没有任何JavaScript，所以它只是无处提交)。

演示A

* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 90%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
.asterisk {
font-size: 3ch;
color: red;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<span class='asterisk'>⃰</span>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>

演示B

* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
padding: 90px 0;
margin: 8% auto;
background: #fff;
border-radius: 15px;
}
form {
width: 280px;
margin: 0 auto;
text-align: center;
}
form * {
font-size: 18px;
}

fieldset {
width: 100%;
border: 0;
}
.asterisk {
font-size: 3ch;
color: red;
cursor: help;
}
legend {
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px auto;
color: #333;
}
input {
width: 90%;
padding: 10px 5px;
border: 0;
border-bottom: 1px solid #999;
outline: none;
text-align: center;
}

::placeholder {
text-align: center;
opacity: 0.3;
}
.next {
margin-top: 30px;
padding: 3px 15px;
border-radius: 6px;
cursor: pointer;
}
<section class="container">
<form>
<fieldset>
<legend>Let's Start Building!</legend>
<input type="email" placeholder="E-mail" required>

<label class='asterisk' title='           E-mail is required    '>*</label>
</fieldset>

<button class="next">Next</button>
</form>
</section>

演示C

* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
padding: 90px 0;
margin: 8% auto;
background: #fff;
border-radius: 15px;
}
form {
width: 280px;
margin: 0 auto;
text-align: center;
}
form * {
font-size: 18px;
}

fieldset {
width: 100%;
border: 0;
}
.required::after {
content: '*';
font-size: 22px;
color: red;
}
legend {
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px auto;
color: #333;
}
input {
width: 90%;
padding: 10px 5px;
border: 0;
border-bottom: 1px solid #999;
outline: none;
text-align: center;
}

::placeholder {
text-align: center;
opacity: 0.3;
}
.next {
margin-top: 30px;
padding: 3px 15px;
border-radius: 6px;
cursor: pointer;
}
<section class="container">
<form>
<fieldset class='required'>
<legend>Let's Start Building!</legend>
<input type="email" placeholder="E-mail" required>
</fieldset>

<button class="next">Next</button>
</form>
</section>

如果您可以添加到HTML中，那么与输入相关联的标签会很有帮助，例如，请参阅MDN

将a与元素关联提供了一些主要优势：

标签文本不仅在视觉上与其对应的文本输入；它也以编程方式与之关联。这意味着例如，当用户专注于表单输入，使助手更容易技术用户了解应该输入哪些数据。你可以单击关联的标签以聚焦/激活输入，以及输入本身。这种增加的命中区域为任何人提供了优势尝试激活输入，包括使用触摸屏的输入装置

占位符消失后，它会保留下来，以便提醒用户需要什么，您可以对其进行格式化。例如：

* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container {
width: 80%;
max-width: 700px;
min-height: 520px;
height: auto;
margin: 8% auto;
background: #fff;
border-radius: 15px;
position: relative;
padding: 90px 0;
overflow: auto;
}
h2 {
text-align: center;
margin-bottom: 80px;
color: #333;
}
.container form {
width: 280px;
text-align: center;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
form input {
width: 100%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
label[for="email"]::after {
content: ' (required)';
color: red;  
}
input[required] {
border: solid red;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<label for="email">Please type in your email address</label>
<input id="email" type="email" placeholder="E-mail" required>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium