占位符字体不变

Question

我尝试更改占位符字体以匹配我的其余输入字段，但它似乎不起作用，但是当我通过手机查看我的网站时，字体都是一样的。

有问题的占位符可以在这里看到。没有改变的字体是消息字段，它是textarea。我不确定这是否是导致此问题的原因，如果是，如何解决。

http://sundayfundayleague.com/contact

我有这段代码：

textarea {
font-family: Helvectica;
font-size: 18px;
}
::-webkit-input-placeholder {
   font-style: Helvetica;
}

:-moz-placeholder { /* Firefox 18- */
   font-style: Helvetica; 
}

::-moz-placeholder {  /* Firefox 19+ */
   font-style: Helvetica; 
}

:-ms-input-placeholder {  
   font-style: Helvetica;
}
.inputbarmessage {
display: block;
width: 400px;
margin: 10px auto;
font-size: 18px;
padding: 10px;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
-o-transition: all 0.40s ease-in-out;
outline: none;
border: 1px solid #DDDDDD;
}

HTML

<form action="" method="post" id="mycontactform" >
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required>
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
    <label for="contactButton">
        <input type="button" class="contactButton" value="Send Message" id="submit">
    </label>
</form>

有人看到我做错了吗？

Answer 1

您想使用font-family，而不是font-style 属性，如下所示：

::-webkit-input-placeholder {
    font-family: Helvetica;
}
:-moz-placeholder {
    font-family: Helvetica;
}
::-moz-placeholder {
    font-family: Helvetica;
}
:-ms-input-placeholder {
    font-family: Helvetica;
}