输入框中占位符旁边的红色星号

问题描述

我做了很多谷歌搜索，但是找不到适合我的答案.

I've done a bunch of googling, but I can't find an answer anywhere that works for me.

我正在创建一个表格(这是有史以来第一次)，我需要在输入框中的占位符文本旁边直接添加一个红色星号.令人尴尬的是，这是我到目前为止所能获得的最接近的结果:

I'm creating a form (for the first time ever) and I need a red asterisk directly next to the placeholder text in the input boxes. Embarrassingly, this is the closest I have been able to get so far:

form {
  margin: 0 auto;
  background-color: #3d549a;
}
input {
  font-family: avenir;
  font-size: 17px;
  color: #ffffff;
  font-weight: 100;
  border: none;
  width: 400px;
  padding: 15px;
  border-radius: 5px;
}
textarea {
  height: 5em;
  resize: vertical;
  font-family: avenir;
  font-size: 17px;
  color: #ffffff;
  font-weight: 100;
  border: none;
  width: 860px;
  padding: 15px;
  border-radius: 5px;
}
.asterisk_input:after {
  content: " *";
  color: #e32;
  position: absolute;
  margin: 0px 0px 0px -20px;
  font-size: 17px;
  padding: 0 5px 0 0;
}
.buttonblue {
  padding-left: 90px;
  background-color: #31b9e9;
  font-family: avenir;
  font-size: 16px;
  width: 300px;
  height: 75px;
  color: #ffffff;
  padding: 0;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 5px 1px #21a1c6;
}
button {
  margin-left: .5em;
}

<table width="100%" style="background-color: #3d549a" height="820px">

  <tr height="250">
    <td valign="bottom" align="center" width="100%" colspan="4">
      <span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;">GET IN TOUCH<span/>
      <hr color="#273a72" width="75" align="centre">
      <span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;">1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: [phone]</span>
    </td>
  </tr>

  <tr>
    <td>
      <form action="/my-handling-form-page" method="post">
        <p>
          <input type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
          <span class="asterisk_input">  </span>
          <input type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
          <span class="asterisk_input">  </span>
        </p>
        <p>
          <textarea id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"></textarea>
          <span class="asterisk_input">  </span>
        </p>
        <p>
          <button class="buttonblue" type="submit">SEND MESSAGE</button>
        </p>
      </form>
    </td>
  </tr>
</table>

(我也很难将其居中；)但是我想一次有一个问题

(I'm also having trouble centreing it ;) But one problem at a time, I suppose

推荐答案

不幸的是，没有一种通用的方法可以轻松地做到这一点，但是有一种获得大多数浏览器支持的方法.原因是您将需要设置占位符的样式，并且关于此操作的方式还没有统一的标准.但是，只要不需要对旧版IE浏览器的支持，您就可以采用以下方法:

Unfortunately, there isn't a universal way of doing this easily, but there is a way to get support for most browsers. The reason being is that you're going to need to style a placeholder, and there isn't a universal standard on how this is done. But, as long as you don't need support for older IE browsers, you should be okay with the following approach:

首先，在输入框本身中添加一个名为"required"的类.然后，添加以下标签:

First, add a class named "required" or some such to the input box itself. Then, add the following tags:

.required::-webkit-input-placeholder:after {
    content: " *";
    color: red;
}

.required:-moz-placeholder:after {
    content: " *";
    color: red;
}

.required:-ms-input-placeholder:after {
    content: " *";
    color: red;
}

这篇关于输入框中占位符旁边的红色星号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！