css修改input中placeholder样式

Question

这是手机上的H5页面，我要实现这样的placeholder样式，请问要怎么实现呢

我主要是想知道怎么给placeholder设置两种不同的颜色

Answer 1

input {
  background-color: #ddd;
  border: none;
  border-radius: 4px;
  padding: 5px;
}
input::-webkit-input-placeholder {
  color: #ccc;
}

Answer 2

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 ~ 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10 ~ 11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* 大部分现代浏览器 */
   color:    #909;
}

Answer 3

placeholder里的字体样式可以通过这样修改

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

而字体前方的红色*，可以采用背景图片的形式插入

input{
    background: url(......) no-repeat 2%;//具体位置你调整下
    padding-left:10px;//调整光标插入位置，防止与*号重叠
}