在输入框中，红色星号直接位于占位符旁边。

13 浏览
0 Comments

在输入框中，红色星号直接位于占位符旁边。

我已经进行了大量的谷歌搜索，但是我找不到适合我使用的任何答案。\n我正在创建一个表单（第一次）并且我需要在输入框的占位文本旁边直接放置一个红色的星号。可耻的是，到目前为止，这是我能做到的最接近的：\n

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;
}

\n


  

    
      联系我们
      

      美国华盛顿特区宾夕法尼亚大道1600号，邮编20500，美利坚合众国。电话：（202）456-1111

\n（我也遇到了居中对齐的问题;) 但一次解决一个问题，我想

0

2 答案

0 Comments

问题出现的原因：在输入框中的占位符旁边直接有一个红色星号。

解决方法：在.form类中添加以下代码：

display: table;

。

代码示例：

cd /home/user/

。

0
0 Comments

红色星号直接在输入框中的占位符旁边的问题是由于需要样式化占位符，而没有一个通用的标准来完成这个任务。然而，只要不需要支持旧版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;  
}

如果希望占位符居中，可以尝试在相关的CSS属性中添加`align="center"`。然而，根据对话中的内容，这种方法可能并不适用于所有的浏览器。

在对话中，还提到了关于如何将所有输入框的间距均匀分布的问题。其中一个解决方法是在输入字段上使用现有的`required`属性，而不是添加新的类。例如，可以使用如下选择器：

[required]::-webkit-input-placeholder:after {}

然而，这种方法只适用于Chrome浏览器，不适用于Firefox。在这种情况下，可以使用caniuse.com/#search=input-placeholder来查看浏览器的兼容性情况。

0