Question

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

这里可以看到有问题的占位符。不变的字体是消息字段，它是textarea。我不确定这是否是造成这种情况的原因，如果是，如何解决它。

我已准备好此代码：

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

占位符字体不变

1 个答案: