我已经做了很多谷歌搜索，但我找不到任何适合我的答案。
我正在创建一个表单（有史以来第一次），并且我需要在输入框中的占位符文本旁边添加一个红色星号。尴尬的是，这是迄今为止我能得到的最接近的结果：
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: (202) 456-1111</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>
（我也很难将其居中；）但我想一次只有一个问题
不幸的是，没有一种通用的方法可以轻松地做到这一点，但有一种方法可以获得大多数浏览器的支持。原因是您需要设置占位符的样式，并且对于如何完成此操作没有通用标准。但是，只要您不需要旧版 IE 浏览器的支持，您应该可以使用以下方法：
首先，向输入框本身添加一个名为“required”的类或类似的类。然后，添加以下标签：
.required::-webkit-input-placeholder:after {
content: " *";
color: red;
}
.required:-moz-placeholder:after {
content: " *";
color: red;
}
.required:-ms-input-placeholder:after {
content: " *";
color: red;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
