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

pftdvrlh  于 2022-12-30  发布在  其他
关注(0)|答案(4)|浏览(150)

我构建了一个在占位符中包含问题的表单。现在我需要为必填字段添加一个红色星号。通常我们可以使用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有没有办法可以在我的代码中使用这个网站的方法？

css

4条答案

按热度按时间
yx2lnoni

yx2lnoni1#

这并不理想，但是既然你说你不能添加元素，也没有提到使用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>
赞(0）分享  回复(0）举报  2022-12-30
7d7tgy0s

7d7tgy0s2#

如果您可以向HTML中添加，则与输入相关联的标签会很有帮助，例如，请参见MDN
将与元素关联具有一些主要优点：
标签文本不仅在视觉上与其对应的文本输入相关联;它也是以编程方式与之关联的。这意味着，例如，当用户聚焦于表单输入时，屏幕阅读器将读出标签，从而使辅助技术用户更容易理解应该输入哪些数据。您可以单击关联的标签以聚焦/激活输入，以及输入本身。这种增加的命中区域为试图激活输入的任何人提供了优势，包括那些使用触摸屏设备的人。
占位符消失后，它仍会保留，以便提醒用户需要什么，您可以设置它的格式。例如：

* {
  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>
赞(0）分享  回复(0）举报  2022-12-30
bvuwiixz

bvuwiixz3#

我可以很有把握地假设OP（akaOriginalPoster）不使用<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>的semantic elements。
  • 删除了一些无效的样式。
  • 已删除<div class="btn-box">。
  • 已经改变了margin s，padding，text-align，和font-size，这是禁欲主义更好的海事组织。
  • 已删除属性type='button'。请参见下面<form>部分中的<button>。

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

  • 为了语义起见，使用<label>而不是<span>。

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

  • CSS属性::after被分配给<fieldset>元素，而不是像前面的演示中使用的<label>或<span>那样实际使用额外的元素。
    • 注意：**在所有的演示中，一个特殊的字符"combining asterisk above"被用于实际的星号。这个字符出现在行的顶部，很像一个上标字符。
      **Also Note:**The font-size s are absolute values ( px 😬) which I would not normally use but the OP's demo is not responsive.

<form>中的<form>

<form>中的<button>在用户单击时具有继承行为，<form>将根据HTML或JavaScript中设置的任何适用指令执行validate，然后如果一切正常，则提交数据。如果<button>具有type="button"，<button>在没有JavaScript的情况下无法执行任何操作，这意味着HTML属性required仅限于通过在悬停<input>时显示消息来验证用户输入。
在Demo B和Demo C中，<button>没有type="button"。请输入*不是*电子邮件地址的内容，并将其行为与Demo 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

一个二个一个一个

演示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>
赞(0）分享  回复(0）举报  2022-12-30
j2qf4p5b

j2qf4p5b4#

但是如何在打字时隐藏星星呢？

赞(0）分享  回复(0）举报  2022-12-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com